Hướng dẫn chia bài viết dài thành nhiều trang cho Blogspot

Một bài viết dài sẽ đem tới cho bạn đọc blog gặp rất nhiều khó khăn và chán nản mỗi khi nhìn thấy bài viết của bạn. Với bài viết "Hướng dẫn chia bài viết dài thành nhiều trang cho Blogspot" sẽ giúp bạn tối ưu được bài viết của bạn gọn gàng hơn trong mắt bạn đọc và tăng được tỷ lệ CTR cho blog của bạn rất nhiều. Một khi CTR tăng thì đồng nghĩa với việc doanh thu quảng cáo của blog bạn cũng ngày một tăng theo.

Ở bài viết này mình sẽ chia bài viết dài ra thành 5 trang nhỏ hoặc ít hơn nếu bạn muốn nhiều hơn hãy chỉnh sửa lại đoạn code bên dưới của mình sao cho phù hợp nhé !

Hướng dẫn chia bài viết dài thành nhiều trang cho Blogspot

1. Đầu tiên hãy vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào sau thẻ ]]></b:skin>

Jquery<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, .button_4, .button_5 {
    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, .button_4:hover, .button_5: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('.content_4').fadeOut('fast');
jQuery('.content_5').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');
jQuery('.button_4').css('background','#fff');
jQuery('.button_4').css('color','#F4655F');
jQuery('.button_5').css('background','#fff');
jQuery('.button_5').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('.content_4').fadeOut('fast');
jQuery('.content_5').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');
jQuery('.button_4').css('background','#fff');
jQuery('.button_4').css('color','#F4655F');
jQuery('.button_5').css('background','#fff');
jQuery('.button_5').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('.content_4').fadeOut('fast');
jQuery('.content_5').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_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_4').css('background','#fff');
jQuery('.button_4').css('color','#F4655F');
jQuery('.button_5').css('background','#fff');
jQuery('.button_5').css('color','#F4655F');
return false;
});
jQuery('.button_4').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery('.content_4').fadeIn('slow');
jQuery('.content_5').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_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
jQuery('.button_5').css('background','#fff');
jQuery('.button_5').css('color','#F4655F');
return false;
});
jQuery('.button_5').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery('.content_4').fadeOut('fast');
jQuery('.content_5').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');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
jQuery('.button_4').css('background','#fff');
jQuery('.button_4').css('color','#F4655F');
return false;
});
});
</script></b:if>

2. Quay lại phần Post New → HTML và thêm đoạn code sau vào rồi chỉnh sửa lại cho phù hợp với nội dung từng bài viết của bạn.

HTML<div class="content_1">
Nội dung đoạn 1
</div>
<div class="content_2" style="display: none;">
Nội dung đoạn 2
</div>
<div class="content_3" style="display: none;">
Nội dung đoạn 3
</div>
<div class="content_4" style="display: none;">
Nội dung đoạn 4
</div>
<div class="content_5" style="display: none;">
Nội dung đoạn 5
</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>
<a class="button_4" href="#">4</a>
<a class="button_5" href="#">5</a>
</div>

3. Bước này cần chú ý đó copy đoạn mã javascript sau vào phía sau thẻ <head> Đi tới Blogger.com → Blog của bạn → Teamplate → Edit HTML copy và dán đoạn code bên dưới vào sau thẻ <head> . Bạn tìm kiếm thử xem blog của bạn đã có sẵn đoạn mã này chưa nếu có rồi thì không cần phải thêm vào nữa và ấn Lưu lại.

JS<script src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>

Sau khi hoàn thành tất cả các bước trên hãy quay lại bài viết của bạn và xem thành quả. Chúc các bạn thành công.

Hãy để lại comment nếu bạn có bất kỳ ý kiến gì về bài viết.