Thư viện

Trải nghiệm

Thứ Bảy, tháng 11 01, 2014

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

Thủ thuật chia bài viết thành nhiều trang cho Blogger V1, làm trang đọc truyện cho blogger, làm trang xem phim cho blogger, trang đọc truyện cho blogspot hay nhất!

Chia sẻ:
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 != &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

9 nhận xét:

  1. Trời ơi...cái blog truyện của em đang cần cái này. Thanks a nhiều!
    Giá mà nó tự động thì tuyệt cú mèo luôn a ơi.

    Trả lờiXóa
    Trả lời
    1. Chúc mừng em đã có thủ thuật hay nhé :D

      Xóa
    2. Blog của a có nhiều thứ thú vị thật, đúng là "viết cho người dùng chứ không phải viết cho công cụ tìm kiếm".... :))

      Xóa
    3. Anh có biết tạo logo bằng cái gì không, loại logo có thể làm watermark á

      Xóa
  2. Có cách nào để nó tự động không namka

    Trả lờiXóa
  3. mình muốn tạo cho hẳn 37 trang, nhưng nó chỉ đc 3 trang như demo, sang trang 4 thì ko còn đc nữa, phải sửa code bước 1 hả bạn

    Trả lờiXóa
  4. anh có code skin dành cho blog liên quan đến truyện ko ? ... em đang cần mà tìm hoài ko có

    Trả lờiXóa
  5. anh nam ơi,em đã thử và rất hiệu quả !
    Song có một vấn đề nảy sinh : khi click xem phân trang thứ 2, 3,.... bài viết không tự kéo về đầu văn bản của trang đó, Như vậy đồng nghĩa với việc người đọc sẽ phải mất một động tác nữa là kéo thanh thước dọc về đầu đoạn văn bản của phân trang đó.
    Có cách nào để khi click vào phân trang thì nó trở về đầu văn bản của phân trang đó không anh ạ? thanks anh !

    Trả lờiXóa
  6. Mình đã chèn vào và thấy nó hoạt động tốt trên web. Còn phiên bản mobile nó không hoạt động nhỉ
    ------------
    Nhà Treo Vách Đá

    Trả lờiXóa