"Hiển thị bài viết dạng sách cho các bài viết trên Blogspot"

(Traidatmui.com) – Bài viết hôm mình chia sẻ với các bạn là cách trình bày các bài viết với một phong các hoàn toàn mới cho Blogspot. Thủ thuật này sẽ giúp bạn có thể trình bày các bài viết của mình dạng một cuốn sách, tức là chúng ta có thể xem các bài viết trên Blogspot bằng cách lật từng trang từng trang giống như chúng ta đang xem một cuốn sách. Đây là một phong cách cũng khá hay dành cho Blogspot mà mình đã test thử thời gian khá lâu giờ xin chia sẻ cùng mọi người.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/booklet.js" type="text/javascript"></script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.booklet{
font-family:arial;
color:#000;
position:relative;
margin:0 auto 10px;}
.booklet .b-page {
left:0; top:0;
position:absolute;
overflow:hidden;
padding:0;}
.booklet .b-counter {
bottom:10px; position:absolute;
display:block; width:25px;
height:20px;
color:#444;
text-align:center;
font-family:Times New Roman;
width:90%;
border-top:1px solid #ddd;
text-align:center;
font-size:12px;
padding:5px 0 0;
-moz-box-shadow:0px -1px 1px #fff;
-webkit-box-shadow:0px -1px 1px #fff;
box-shadow:0px -1px 1px #fff;
opacity:0.8;}
.booklet .b-wrap-left {
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TdRn953dcOI/AAAAAAAAAVU/qFJBY_wrq-I/left_bg.jpg) no-repeat top left;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right {
background:#efefef url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TdRm3ykflwI/AAAAAAAAAVM/ytRwxWkJajU/right_bg.jpg) no-repeat top left;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.book_wrapper{
margin:0 auto;
padding-top:50px;
width:900px; /*độ rộng của tiện ích*/
height:545px; /*chiều cao của tiện ích*/
position:relative;
background:transparent url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TdRm3wDuM9I/AAAAAAAAAVQ/nrkqJemJEo0/bg.png) no-repeat 9px 27px;
}
.book_wrapper h2:hover{
color:#ccc;
}
.book_wrapper h2{
color:#000;
margin:0px 2px 0px 10px;
font-size:12px;
padding-bottom:7px;
}
.datetext {
font-size:11px;
margin-left:30px;
}
.authorpost{
font-size:11px;
margin-left:0px;
background:url("https://lh3.googleusercontent.com/_BTztXRwC9ik/TdYZZe6rGcI/AAAAAAAAIXU/pQItRlUD5rs/aaa.png") no-repeat 0px 0px transparent;
padding:3px 0px 0px 18px;
}
.book_wrapper p{
text-indent: 0.5cm;
font-size:12px;
line-height:1.4em;
margin:3px 5px 5px 4px;
}
.book_postimage {
float:right;
margin-bottom:10px;
width:370px; /*độ rộng của ảnh bài viết*/
height:200px; /*chiều cao của ảnh bài viết*/
padding:2px;
border:1px solid #fff;
}
a#next_page_button,a#prev_page_button{
display:none;
position:absolute;
width:41px; /*độ rộng của nút next*/
height:40px; /*chiều cao của nút next*/
cursor:pointer;
margin-top:0px;
top:50%;
background:transparent url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TdRm3TRDFsI/AAAAAAAAAVI/if2yHXGb58s/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-5px;
}
a#next_page_button{
right:-5px;
background-position:-41px -40px;
}
a#next_page_button:hover{
background-position:-41px 0px;
}
a#prev_page_button:hover{
background-position:0px 0px;
}
.loading{
width:160px;
height:56px;
position: absolute;
top:50%;
margin-top:-28px;
right:135px;
line-height:56px;
color:#fff;
padding-left:60px;
font-size:15px;
background: #000 url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TdRm2-dm4fI/AAAAAAAAAU8/OuqqRuq8S6E/ajax-loader.gif) no-repeat 10px 50%;
opacity: 0.7;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";
showRandomImg = false;
aBold = true;
text = "Comments";
showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
summaryPost = 670; //số ký tự hiển thị phần tóm tắt bài viết
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
numposts =15; //số bài viết hiển thị, ở đây mình chỉ mặc định số bài viết tối đa là 15
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Loading pages...</div>
<div id="mybook" style="display:none;">
<script src="http://data-traidatmui.appspot.com/scripts/book-label.js" type="text/javascript"></script>
</div></div><div></div>


Bạn dựa vào các hướng dẫn để tùy chỉnh lại cho phù hợp, ở đây mình chỉ hướng dẫn chỉnh sửa những phần cơ bản. Nếu có thắc mắc hay cần giúp đỡ thì bạn vui lòng để lại comment bên dưới mình sẽ tranh thủ giúp bạn.

8. Save tiện ích lại

Nếu muốn hiển thị cho toàn bộ bài viết trên blog thì bạn thay file JS (book-label.js) ở trên thành link bên dưới
http://data-traidatmui.appspot.com/scripts/book-allpost.js


Chúc bạn thành công

Tham khảo code tympanus.net

Xem khác cùng chủ đề

4 nhận xét | Viết lời bình

6/28/2011 03:35:00 SA Trả lời

Cái này hay ,em thử rồi nhưng mà nặng quá đi mất,ặc ặc

6/29/2011 08:21:00 SA Trả lời

4 file js cơ à :((

Admin
7/06/2011 08:42:00 CH Trả lời

Vâng cái này quả thật là khá nặng vì phải sử dụng nhiều Script. Cái này thì phải chịu.hehe!

11/21/2011 05:57:00 SA Trả lời

nhiều file js quá .hjz .dungdung

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang