Breaking News

Loading...

Thứ Tư, 27 tháng 6, 2012

Home » Advanced blogger » Hiển thị bài viết dạng lật trang cho Blogspot

Hiển thị bài viết dạng lật trang cho Blogspot

09:37

Advanced blogger

Traidatmui.com – Khi bạn đọc một cuốn sách nào đó thì để xem trang tiếp theo bạn sẽ làm một động tác là "lật" trang và thủ thuật này sẽ ứng dụng cách lật trang như thế cho các bài viết trên blogger của bạn. Bạn hãy xem demo sẽ thấy rỏ hơn, bạn chỉ cần click chuột hoặc kéo trang qua hoặc click next để xem tiếp.

Hiển thị bài viết dạng lật trang cho Blogspot

» 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 src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/JQuery-ui.min.1.8.11.js" type="text/javascript"></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.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$('#mybook').booklet({
tabs: true,
width: 650, // độ rộng tiện ích
height: 500, // chiều cao tiện ích
overlays: true, // nếu không muốn click vào bài để lật trang bạn thay thành false
manual: false
});
});

</script>

<style>.flippage{text-shadow:0 1px #fff;font-size:16px;color:#222;line-height:1.5em}
.imgp{width:305px;height:150px;margin:0 0 8px 0}
.flippage h2{background:none;font-weight:bold;text-transform:uppercase;font-family:times;font-size:16px;line-height:1.3em;margin:0;padding:0}
.flippage h2 a{color:#045a90}
.booklet{position:relative}
.booklet .b-page{left:0;top:0;position:absolute;overflow:hidden;padding:0}
.booklet .b-wrap{top:0;position:absolute}
.booklet .b-wrap-left{background:#fff}
.booklet .b-wrap-right{background:#efefef}
.booklet .b-pN .b-wrap,.booklet .b-p1 .b-wrap,.booklet .b-p2 .b-wrap,.booklet .b-p3 .b-wrap,.booklet .b-p4 .b-wrap{left:0}
.booklet .b-p0 .b-wrap{right:0}
.booklet .b-counter{text-shadow:0 1px #fff;box-shadow:0 0 6px #999 inset;bottom:0;position:absolute;display:block;width:25px;background:#eee;color:#033982;text-align:center;font-family:arial;font-size:12px;padding:4px 0 4px 0;font-weight:bold}
.booklet .b-wrap-left .b-counter{left:0}
.booklet .b-wrap-right .b-counter{right:0}
.booklet .b-overlay{top:0;position:absolute;height:100%;width:50%}
.booklet .b-overlay-prev{left:0}
.booklet .b-overlay-next{right:0}
.booklet .b-tab{font-weight:bold;border-top-left-radius:5px;border-top-right-radius:5px;text-shadow:0 1px #fff;box-shadow:0 0 6px #666 inset;background:#eee;width:100%;padding:5px 0 0 0;text-align:center;color:#024093;position:absolute;font-size:12px}
.booklet .b-tab-prev{left:0}
.booklet .b-tab-next{right:0}
.booklet .b-tab:hover{background:#ccc;color:#000}
body{z-index:0}
.b-menu{z-index:100}
.b-selector{z-index:100}
.booklet{z-index:10}
.b-pN{z-index:10}
.b-p0{z-index:30}
.b-p1{z-index:20}
.b-p2{z-index:20}
.b-p3{z-index:30}
.b-p4{z-index:10}
.b-prev{z-index:40}
.b-next{z-index:40}
.b-counter{z-index:40}
</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. 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/AVvXsEgO4RO9Pl5VQaatmpoBnxHZo3UMPt2MTXHepJfeQo_bBDEQ0Cg2fsXbYyIZ-jEDVDtYIUn147iBCm__7qgO4LpHLMgryssyPYuiWw85Q8GnQlCbkVSUZ6Zkotpf-PlH1h8a8GiS9-XNUNYQ/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = true;
summaryPost = 400; //số kí tự phần tóm tắt
numflipposts = 30; //số bài viết hiển thị
fliplabel = "Advanced blogger"; //thay thành tên nhãn của blog bạn
fliphome_page = "http://sauciu.blogspot.com/"; //thay thành địa chỉ blog của bạn
</script>
<script src="http://data-traidatmui.appspot.com/scripts/booklet_label.js" type="text/javascript"></script>

7. Cuối cùng save tiện ích lại

Để hiển thị cho tất cả bài viết bạn thay http://data-traidatmui.appspot.com/scripts/booklet_label.js thành link bên dưới

http://data-traidatmui.appspot.com/scripts/booklet_allpost.js

Có vấn đề gì chưa rỏ bạn để lại comment bên dưới để trao đổi thêm nhé

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

Tham khảo builtbywill.com

0 nhận xét:

Đăng nhận xét

Toggle Footer