Phân trang đẹp cho Blogspot

Code tự phân trang trên bài viết trong blogspot nhằm phân trang cho những bài viết dài như truyện hoặc những đoạn văn dài mà chúng ta không muốn tạo thêm bài viết mới.
Bài viết của bạn dài cùng một nội dung, bạn không muốn tách ra làm 2 bài khác nhau sẽ gây ra những rắc rối không hề nhỏ cho web bạn, vậy làm sao để phân trang bài viết một cách đơn giản hiệu quả hôm nay chia sẽ 69 sẻ hướng dẫn đến các bạn

1. Phân trang haivl.com

Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]></b:skin>.

#blog-pager {text-align: center;overflow: hidden;}
#blog-pager-newer-link {float: left;width: 42%;margin-bottom:10px;line-height:30px;padding:0 10px;font-size:12px;font-weight:bold;background-color:#00A5F0;color:white;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;border:1px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;-moz-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px #fff;-webkit-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;text-shadow:0 -1px rgba(0,0,0,.2);text-align:center;min-width:45px;cursor:pointer}
#blog-pager-older-link {float: right;width: 42%;margin-bottom:10px;line-height:30px;padding:0 10px;font-size:12px;font-weight:bold;background-color:#00A5F0;color:white;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;border:1px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;-moz-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px #fff;-webkit-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;text-shadow:0 -1px rgba(0,0,0,.2);text-align:center;min-width:45px;cursor:pointer}
#blog-pager :hover {background-color:#24BBFF}
#blog-pager-newer-link a, #blog-pager-older-link a, #blog-pager a {color:#fff}

Dán đoạn code bên dưới vào trong thẻ:  <b:includable id='nextprev'>...</b:includable>

 <div style='clear: both;'/>
   <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' rel='nofollow'><span class='blog-pager-newer-link' id='blog-pager-newer-link'>&#171; Trang trước</span></a>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' rel='nofollow'><span class='blog-pager-older-link' id='blog-pager-older-link'>Trang sau &#187;</span></a>
    </b:if>
</div>
<div style='clear: both;'/>

2. Phân  trang Chấtvl.com

Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]></b:skin>.

#blog-pager {text-align: center;overflow: hidden;}
#blog-pager-newer-link {float: left;width: 48%;margin-bottom:10px;line-height:30px;padding:0 10px;font-size:12px;font-weight:bold;background-color:#00A5F0;color:white;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;border:1px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;-moz-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px #fff;-webkit-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;text-shadow:0 -1px rgba(0,0,0,.2);text-align:center;min-width:45px;cursor:pointer}
#blog-pager-older-link {float: right;width: 48%;margin-bottom:10px;line-height:30px;padding:0 10px;font-size:12px;font-weight:bold;background-color:#00A5F0;color:white;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;border:1px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;-moz-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px #fff;-webkit-box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1px white;text-shadow:0 -1px rgba(0,0,0,.2);text-align:center;min-width:45px;cursor:pointer}
#blog-pager :hover {background-color:#24BBFF}
#blog-pager-newer-link a, #blog-pager-older-link a, #blog-pager a {color:#fff}

Dán đoạn code bên dưới vào trong thẻ:  <b:includable id='nextprev'>...</b:includable>

<div style='clear: both;'/>
<span class='post-next-prev'>
<b:if cond='data:newerPageUrl'>
<span class='prev-arrow'/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Bài trước</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Bài sau</a><span class='arrow'/>
</b:if>
</span>
<div style='clear: both;'/>