Hiển thị bài viết dạng sách cho các bài viết trên Blogspot
Thứ Sáu, 28 tháng 12, 2012
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.
» 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>
5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
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
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
» Bắt đầu thủ thuật1. Đă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://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js"></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/booklet.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.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/AVvXsEgcgPG0h3AuzsbPedze4WNT6-P4zJoFbnF_UO2AVUW-GLnKlF5MdGNjs_WKycVYWUjZoGr67hnRRcSxczHQHy-L_PI3KweAarA9jcREU6bGZjH3rQYUdaArZvkoz4E0SpnS5MBgwA4_lTeU/") 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);
}
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/AVvXsEgcgPG0h3AuzsbPedze4WNT6-P4zJoFbnF_UO2AVUW-GLnKlF5MdGNjs_WKycVYWUjZoGr67hnRRcSxczHQHy-L_PI3KweAarA9jcREU6bGZjH3rQYUdaArZvkoz4E0SpnS5MBgwA4_lTeU/") 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/AVvXsEihpu2dwmvlKlkEVUoDkXgDLUai1faIp2O8-DOWhlYhoUEGzcvuZ92vSE9Cjhu9cBPLDvcP3TaxV66ml40bvWhnM7bJLLvbYjUJZtuRxtLaFsnyMUJ_goAC0_TjsYq5s1boYhXYzTUWb2nH/";
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://traidatmui-tips.googlecode.com/files/book-label.js" type="text/javascript"></script>
</div></div><div></div>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihpu2dwmvlKlkEVUoDkXgDLUai1faIp2O8-DOWhlYhoUEGzcvuZ92vSE9Cjhu9cBPLDvcP3TaxV66ml40bvWhnM7bJLLvbYjUJZtuRxtLaFsnyMUJ_goAC0_TjsYq5s1boYhXYzTUWb2nH/";
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://traidatmui-tips.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
Comments[ 0 ]
Đăng nhận xét