Hướng dẫn tạo phân trang ( Page Navigation ) cho BlogSpot
Để tiện dễ dàng theo dõi bài viết mới thì ta có thể tạo phân trang (Page Navigation ) cho BlogSpot . Page Navigation đối với các Website giờ đây đa số đã không còn xa lạ , nhưng với Blogger thì công cụ này vẫn chưa thực sự được hỗ trợ mạnh . Có nghĩa là nó sẽ hiện "Older posts" hay "Newer post" chứ không có phân ra các trang có đánh số cho người đọc dễ theo dõi và thao tác . Bạn có thể tham khảo một số style khác nhau và làm theo hướng dẫn tạo ra một Page Navigation đẹp mắt nhé !
Bước 1 : Thêm css
Blogger Dashboard > Template > Edit HTML
(Vào bảng điều khiển → Chọn Mẫu → Chỉnh sửa HTML )
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}
Bước 1 : Thêm css
(Vào bảng điều khiển → Chọn Mẫu → Chỉnh sửa HTML )
Bước 2 :
Click bất kì chỗ nào trong khung soạn thảo HTML → Nhấn CTRL + F → Đánh chữ ]]></b:skin>
Bước 3 :
Tiếp tục tìm đoạn code sau:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>Lưu ý đối với 1 số blog thì chữ Blog Posts được thay bằng Bài đăng trên Blog. Bạn chèn sau nó đoạn code sau.
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 8,
numPages: 6,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>Chú ý trong đoạn code trên.
perPage là số bài hiển thị trên 1 trang.
numPages là số trang hiển thị ra nút bấm
chữ "First" "Last" có thể thay thế bằng chữ khác tùy thích.1.
.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}.pagenavi span{color:#3a3a3a}.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}.pagenavi .pages{color:#666}2.
.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}3.
.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}4.
.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}5.
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}
6.
.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}7..pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}
2. Tiếp tục tìm đoạn code sau:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>Lưu ý đối với 1 số blog thì chữ Blog Posts được thay bằng Bài đăng trên Blog. Bạn chèn sau nó đoạn code sau.
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>Bước 3.
Tiếp tục tìm đoạn code sau:
<!-- navigation -->
<b:include name='nextprev'/>Thay đoạn code trên bằng đoạn code dưới đây:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
