Blogger

Phân trang cho blogger kiểu PageNavi và các style đẹp

Đối với mỗi website, khi bạn tìm kiếm theo một label nhất định sẽ hiển thị cho mỗi label là 6, 7 hoặc 8 bài nhất định, còn phía dưới nó là kiểu "Trang Tiếp Theo" rất mất thời gian để tìm ki…

Hung.Pro.VN

Developer Windows

---

• 05/10/2016
• Views

• #Blogger
• #CSS
• #HTML
• #Javascript

Đối với mỗi website, khi bạn tìm kiếm theo một label nhất định sẽ hiển thị cho mỗi label là 6, 7 hoặc 8 bài nhất định, còn phía dưới nó là kiểu "Trang Tiếp Theo" rất mất thời gian để tìm kiếm. Vì vậy mình xin giới thiệu với các bạn bài viết "Phân trang cho blogger kiểu PageNavi và các style đẹp". Tiện ích này rất dễ sử dụng, ít rườm rà và ít bị lỗi.

Sau đây là các bước thực hiện:

1. Đăng nhập vào Blogger.
2. Chọn mẫu (Template).
3. Sao lưu mẫu của bạn để đề phòng sảy ra lỗi khi áp dụng thủ thuật này.
4. Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).
5. Thêm đoạn code bên dưới vào trước thẻ ]]></ b: skin>:

Kiểu 1

.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;}

Kiểu 2

.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;}

Kiểu 3

.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}

Kiểu 4

.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}

Kiểu 5

.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}

Kiểu 6

.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}

Tiếp tục tìm đến dòng này:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Chèn ngay sau nó:

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://googledrive.com/host/0BxH71HJ3wF1Qfi1ScUJnQWdnXzNFcExYNXlydTRVX1I5TWpVUGNIVkd2U2s4S3FrLVdiQms/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Tiếp theo, tìm trong template của bạn:

<!-- navigation -->
<b:include name='nextprev'/>

Thông thường sẽ có 3 thẻ Next-Pre trong template của bạn, mình thường thay Next-Pre bên trong thẻ

<b:includable id="main" var="top">

Thay thế nó bằng:

<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>

Tùy chỉnh script:

perPage: số bài viết hiển thị trong 1 trang
numPages: số trang hiển thị
firstText, lastText, nextText, prevText: các từ hiển thị cho các nút First, Last, Next, Prev

Previous post

Phân trang cho blogger kiểu PageNavi và các style đẹp

Next post

Phân trang cho blogger kiểu PageNavi và các style đẹp

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article