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

Điểm 4.6/5 dựa vào 87 đánh giá

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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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://www.traidatmui.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

Loading...

7 nhận xét

  1. votay Hay quá cám ơn bạn nhiều! Nếu nó ở chế độ tự động thì hay hơn đó và có thêm nút stop thì rất tuyệt!

    Trả lờiXóa
    Trả lời
    1. Nếu bạn muốn ở chế độ tự động (auto) thì chỉ cần thêm auto: true, delay:5000, vào trong script trên là được, ngay sau biến tabs: true,

      Xóa
  2. Chào bạn
    Bạn có thể chỉ giúp mình cái này được ko,mình sử dụng theme này mà khi xem bài đăng lại có 2 banner quảng cáo của google,bạn có thể chỉ mình cách bỏ 2 cái này đi được ko,hoặc là thay bẳng cái banner khác được ko.thank bạn nhiều,đây là theme mà mình dùng:
    http://bandatlonganbinhchanh.blogspot.com/2012/08/khu-dan-cu-my-hanh-hoang-gia.html
    vị trí banner: 1 cái dưới tiêu đề, 1 cái dưới cuối bài viết.

    Trả lờiXóa
    Trả lời
    1. Nếu bạn cần loại bỏ thì có thể liên hệ với mình qua Y!M: traidatmui1901 để mình hỗ trợ nhé.

      Xóa
  3. mình cài được nhưng không thể đổi sang hiển thị website khác, nó chỉ hiển thị website mặc định như hình minh họa thôi. Bạn vui lòng chỉ giuos mình.thanks

    Trả lờiXóa
    Trả lời
    1. Bạn xem kỹ hướng dẫn là thay đổi http://www.traidatmui.com/ thành tên miền blog của bạn và biến fliplabel = "Advanced blogger"; thành tên nhãn của blog bạn nhé

      Xóa