Cảm nhận tư duy và tổng hợp kiến thức

Chủ Nhật, 1 tháng 5, 2016

Thủ thuật chia bài viết thành nhiều trang cho Blogger V1

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 ^^!

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 != &quot;index&quot;'> <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
Socializer Widget by Nguyen D. Khanh
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé.

Share:
LIKE and Share this article: :

0 Comments:

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa



Thống kê Blogspot

Lưu trữ Blog

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP