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
#blog-pager {text-align: center;overflow: hidden;}Dán đoạn code bên dưới vào trong thẻ: <b:includable id='nextprev'>...</b:includable>
#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}
<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' rel='nofollow'><span class='blog-pager-newer-link' id='blog-pager-newer-link'>« Trang trước</span></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle' rel='nofollow'><span class='blog-pager-older-link' id='blog-pager-older-link'>Trang sau »</span></a>
</b:if>
</div>
<div style='clear: both;'/>
2. Phân trang Chấtvl.com
#blog-pager {text-align: center;overflow: hidden;}Dán đoạn code bên dưới vào trong thẻ: <b:includable id='nextprev'>...</b:includable>
#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}
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Bài sau</a><span class='arrow'/>
</b:if>
</span>
<div style='clear: both;'/>
Đăng nhận xét
Chào mừng bạn đã đến với blog nhật ký!