Hôm nay Terocket sẽ chia sẽ với các bạn mê thủ thuật blog còn gọi là "Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1", đặc biệt là mê thủ thuật blogger cách để chia một bài viết thành nhiều trang, giống như của Masable, hay các blog công nghệ khác vậy.
Chia nhỏ bài viết thành nhiều phần, phù hợp với một trang đọc truyện hoặc một trang xem phim cả nhà nhé. Terocket sẽ hướng dẫn cách thiết kế trang đọc truyện hay cho cả nhà và trang xem phim bằng blogspot cho cả nhà nhé!
Điểm ưu của Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1 đó là rất tiện dụng trong việc biến thành và chia phần tuyển tập truyện trên cùng một trang, một nơi xem phim và chia phần phim trên đó, chia phần ca nhạc nữa...đặc biệt hơn, có thể chia các nội dung dài thành các đoạn ngắn, giúp các bạn nhà ta dễ dàng hơn trong việc đọc và theo dõi nội dung. Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1 thật thú vị và tiện ích đúng không nào ^^!
>>[Tips] - Nút buttons động bằng CSS3 cho Blogger V1
>>[Tips] - Popular Posts / Bài đăng phổ biến hiện đại & hiệu ứng đẹp tùy chỉnh cho Blogger V1
Giờ thì cùng Terocket thiết kế Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1 nhé các bạn mê blogger và mê thủ thuật nhé.
Live Demo
Bước 1 - Để thực hiện, trước tiên bạn vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F và tìm kiếm ]]></b:skin> trong hộp tìm kiếm. Sau đó hãy dán đoạn mã code dưới đây vào phía sau ]]></b:skin> bạn nhé. Sau đó lưu lại.
<b:if cond='data:blog.pageType != "index"'> <style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script></b:if>
Bước 2 - Vào phần bài viết, chỉnh qua chức năng HTML và copy phần code sau vào nhé, và thay đổi tùy biến nội dung cho phù hợp. Nếu bạn muốn có nhiều trang hơn thì nhân rộng ra thôi, thêm trang 4,5,6...rất dễ dàng.
<div class="content_1">
Nội dung trang 1
</div>
<div class="content_2" style="display: none;">
Nội dung trang 2
</div>
<div class="content_3" style="display: none;">
Nội dung trang 3
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
Bước 3 - Bước này cần chú ý đó copy đoạn mã javascript sau vào phía dưới <head> trong phần Blog Title → Template → Edit HTML. Nhấn Ctrl + F tìm <head>. Đặt phía dưới nó nhé! Còn nếu có rồi thì không cần đặt nha. Rồi lưu lại!
<script src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
Bước 4 - Kết luận của Terocket là chúc các bạn thành công với thủ thuật này,Thủ thuật chia bài viết thành nhiều trang cho Blogger V1!
An Thành Adthinks - Terocket
Post a Comment Blogger Facebook