Pages

Banner 468 x 60px

 

Thứ Ba, 1 tháng 11, 2011

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

Người đăng: Thế Giới Website vào lúc 03:16 0 nhận xét

» 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://nguyenhoangnam.googlecode.com/files/jquery.min.v1.4.1.js.txt"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gMXztZWnAGo1ZmfH2HPy8-wnMqPS9TwXvA4dp5zyd8VmKzYavJ42Ia2hmDihsoxOpmzbsKU598fRx-HTx1RjEh4mFBPfg59akU5JJ-EeAO2mgayEJEJojznTg80OIaFZrabgqMpEwXcF/") 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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiLruOJaFGXMl0y2-uhCN2RhNTo_azzMyJg30Va154hwdtOeD-6J1772tl8EtCLPKNDjUo5nnbW7i3Dz8o8wNKiP4EP6IWUO_T1VgaFEdXHyPGAB_9x9088rfWG_5ApkEO1alMao8O9aQ/";
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://nguyenhoangnam.googlecode.com/files/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://nguyenhoangnam.googlecode.com/files/book-allpost.js


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



Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
 
Thiết kế website đẹp © 2011 DheTemplate.com. Supported by PsPrint Emeryville and homeinbayarea.com