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

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

Xem khác cùng chủ đề

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

6/29/2012 04:29:00 SA Trả lời

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!

Admin
6/29/2012 08:22:00 SA Trả lời

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,

6/30/2012 01:42:00 SA Trả lời

OK! Cám ơn bạn nhiều cunghi

8/21/2012 12:05:00 SA Trả lời

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.

Admin
8/21/2012 07:56:00 SA Trả lời

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é.

10/14/2012 02:26:00 SA Trả lời

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

Admin
10/14/2012 05:10:00 SA Trả lời

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é

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