Thanh điều hướng cho Blogger được viết bởi Anhvo, đây là phân trang mình đánh giá cao cùng với phân trang của Abu Farhan bởi tính nhẹ nhàng. Chỉ dựa vào tổng số lượng bài viết và ngày tháng bài đăng mới nhất toàn blog hoặc từng nhãn được lấy từ feed. Tổng số lượng bài viết chỉ cần thông tin đầu tiên từ feed và dữ liệu được ngắt bởi max-results=0, ngày tháng bài đăng mới nhất được ngắt bởi max-results=1 có chứa thông tin của bài đăng mới nhất toàn blog hoặc từng nhãn. Việc không lấy toàn bộ dữ liệu từ feed để tạo phân trang không những giúp blog tải nhanh mà còn không bị lỗi với blog có trên 500 bài viết, đây là số lượng bài viết tối đa mà feed lưu trữ.
Xem ảnh minh họa
Mẫu 1:
Xem ảnh minh họa bên dưới.
Xem ảnh minh họa bên dưới
Trong đó phần chữ màu đỏ là ID:
Chúc thành công!
Xem ảnh minh họa
Nếu bạn đã lỡ (nhỡ) xài kiểu phân trang khác mà lại kết kiểu phân trang này thì phải xem lại cách cài đặt kiểu phân trang đó rồi làm ngược lại các bước để tháo nó ra khỏi Template rồi bắt đầu cài đặt kiểu phân trang này, theo hướng dẫn sau đây.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sửa HTML.
4- Chọn Mở rộng Mẫu Tiện ích => Và tìm đoạn mã:
<b:include name='nextprev'/>4- Thay thế nó bằng 1 trong 2 đoạn mã dưới đây nếu bạn thích mẫu nào thì thay nó bằng đoạn code tương ứng nha:
Mẫu 1:
Xem ảnh minh họa bên dưới.
<b:if cond='data:blog.pageType == "index"'> <style type="text/css"> .blogpager { font-size:16px; color: #060; font-weight:bold; padding:0px 4px; } </style> <div align="center" style="margin:5px;"><form action="#" name="pager20"><span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span> </form></div> <script type="text/javascript"> var blogID = "2247542137056218612"; var home_page = "/"; var pager_max_main = 5; var pager_first_text = "First"; var pager_last_text = "Last"; var pager_prev_text = "Prev"; var pager_next_text = "Next"; </script> <script type='text/javascript'> //<![CDATA[ var pager_max_results = 20; if(location.href.match("max-results=")){ pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("\&")[0]); } else if(!location.href.match("/search/label/")){ pager_max_results = pager_max_main; } var per_page = pager_max_results ; if(!location.href.match('/search/label/')) { pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary"; pager_pageurl = home_page+"search"; } else { label = location.href.split("/")[5]; label = label.split("?")[0]; label = label.replace(/ /g,"%20"); pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label; pager_pageurl = home_page+"search/label/"+label; } var pager_opening = 1; if(location.href.match("popening=")){ pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("\&")[0]); } var num_pages = 1; function createBlogPager(){ var script = document.createElement('script'); script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost"; script.type = "text/javascript"; document.getElementsByTagName('head')[0].appendChild(script) } function countnumpost(json) { var posts = json.feed.openSearch$totalResults.$t; num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1; var a1 = document.createElement("a"); a1.className = "blogpager"; a1.title = "Jump to page: (1)"; a1.href = "javascript:page(1)"; a1.innerHTML = pager_first_text; document.getElementById("vwg-pager-first").appendChild(a1); var a4 = document.createElement("a"); a4.className = "blogpager"; a4.title = "Jump to page: ("+num_pages+")"; a4.href = "javascript:page("+num_pages+")"; a4.innerHTML = pager_last_text; document.getElementById("vwg-pager-last").appendChild(a4); var prev = (pager_opening!=1) ? pager_opening-1 : 1; var a2 = document.createElement("a"); a2.className = "blogpager"; a2.title = "Jump to page: ("+prev+")"; a2.href = "javascript:page("+prev+")"; a2.innerHTML = pager_prev_text; document.getElementById("vwg-pager-prev").appendChild(a2); var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages; var a3 = document.createElement("a"); a3.className = "blogpager"; a3.title = "Jump to page: ("+next+")"; a3.href = "javascript:page("+next+")"; a3.innerHTML = pager_next_text; document.getElementById("vwg-pager-next").appendChild(a3); document.pager20.showingpage.value = pager_opening; document.pager20.pagestotal.value = num_pages; } function checkpager(){ var uinput = parseInt(document.pager20.showingpage.value); if((uinput <= num_pages)&&(uinput >= 1)) { page(uinput); } else { alert("Invalid page number. Please try by another!"); document.pager20.showingpage.focus() ; document.pager20.showingpage.select(); } } function getDateAndGo(json){ var date2 = json.feed.entry[0].published.$t; ss = parseFloat(date2.substring(17,19)); if(ss<59) ss++; if(ss<10) { ss = "0"+ ss; } date4 = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length)); location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening; } function page(startindex) { pager_opening = startindex; var i = per_page*(startindex-1)+1; var script2 = document.createElement("script"); script2.src = pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo"; document.getElementsByTagName('head')[0].appendChild(script2) } createBlogPager(); //]]> </script> </b:if>
Thay thế 2247542137056218612 thành BlogID của bạn và 5 thành số bài đăng bạn muốn hiển thị trên 1 trang.Mẫu 2:
Xem ảnh minh họa bên dưới
<b:if cond='data:blog.pageType == "index"'> <style type='text/css'> .blogpager { font-size:16x; color:#0033FF; font-weight:bold; background:#CCC; border:1px solid #bbb; padding:0px 4px; } </style> <div align='center' style='margin:5px;'> <form action='#' name='pager20'> <span id='vwg-pager-first'/>&nbsp;<span id='vwg-pager-prev'/>&nbsp;<input name='showingpage' onfocus='this.select()' size='4' title='Nhập số trang bạn muốn đến' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/>&nbsp;<span id='vwg-pager-last'/> </form> </div> <script type='text/javascript'> var blogID = "2247542137056218612"; var home_page = "http://namkna.blogspot.com/"; var pager_max_main = 7; var pager_first_text = "First"; // Bạn có thể đổi thành Đầu var pager_last_text = "Last"; // Bạn có thể đổi thành Cuối var pager_prev_text = "Prev"; // Bạn có thể đổi thành Trước var pager_next_text = "Next"; // Bạn có thể đổi thành Sau </script> <script type='text/javascript'> //<![CDATA[ /******************************** Blogger Pager Script v2.0 (C) 2008 by Anhvo, http://vietwebguide.com Visit http://www.vietwebguide.com to get more cool hacks ********************************/ var pager_max_results = 20; if(location.href.match("max-results=")){ pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("\&")[0]); } else if(!location.href.match("/search/label/")){ pager_max_results = pager_max_main; } var per_page = pager_max_results ; if(!location.href.match('/search/label/')) { pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary"; pager_pageurl = home_page+"search"; } else { label = location.href.split("/")[5]; label = label.split("?")[0]; label = label.replace(/ /g,"%20"); pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label; pager_pageurl = home_page+"search/label/"+label; } var pager_opening = 1; if(location.href.match("popening=")){ pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("\&")[0]); } var num_pages = 1; function createBlogPager(){ var script = document.createElement('script'); script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost"; script.type = "text/javascript"; document.getElementsByTagName('head')[0].appendChild(script) } function countnumpost(json) { var posts = json.feed.openSearch$totalResults.$t; num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1; ////////////////////////////// var a1 = document.createElement("a"); a1.className = "blogpager"; a1.title = "Nhảy đến trang: (1)"; a1.href = "javascript:page(1)"; a1.innerHTML = pager_first_text; document.getElementById("vwg-pager-first").appendChild(a1); var a4 = document.createElement("a"); a4.className = "blogpager"; a4.title = "Nhảy đến trang: ("+num_pages+")"; a4.href = "javascript:page("+num_pages+")"; a4.innerHTML = pager_last_text; document.getElementById("vwg-pager-last").appendChild(a4); var prev = (pager_opening!=1) ? pager_opening-1 : 1; var a2 = document.createElement("a"); a2.className = "blogpager"; a2.title = "Nhảy đến trang: ("+prev+")"; a2.href = "javascript:page("+prev+")"; a2.innerHTML = pager_prev_text; document.getElementById("vwg-pager-prev").appendChild(a2); var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages; var a3 = document.createElement("a"); a3.className = "blogpager"; a3.title = "Nhảy đến trang: ("+next+")"; a3.href = "javascript:page("+next+")"; a3.innerHTML = pager_next_text; document.getElementById("vwg-pager-next").appendChild(a3); document.pager20.showingpage.value = pager_opening; document.pager20.pagestotal.value = num_pages; } function checkpager(){ var uinput = parseInt(document.pager20.showingpage.value); if((uinput <= num_pages)&&(uinput >= 1)) { page(uinput); } else { alert("Invalid page number. Please try by another!"); document.pager20.showingpage.focus() ; document.pager20.showingpage.select(); } } function getDateAndGo(json){ var date2 = json.feed.entry[0].published.$t; ss = parseFloat(date2.substring(17,19)); if(ss<59) ss++; if(ss<10) { ss = "0"+ ss; } date4 = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length)); location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening; } function page(startindex) { pager_opening = startindex; var i = per_page*(startindex-1)+1; var script2 = document.createElement("script"); script2.src = pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo"; document.getElementsByTagName('head')[0].appendChild(script2) } createBlogPager(); //]]> </script> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:include name='nextprev'/> </b:if>
Thay thế 2247542137056218612 thành BlogID của bạn và 5 thành số bài đăng bạn muốn hiển thị trên 1 trang.
Cách xác định ID blogspot:
- bạn vào Thiết kế sau đó copy URL của trang Thiết kế
http://www.blogger.com/rearrange?blogID=2247542137056218612
Xem thêm: Phân trang cho Blogspot dùng CSS Chúc thành công!
Nhận xét
Mình đã làm được theo hướng dẫn này. Thks!
Trả lờiXóaCho mình hỏi lại là, muốn tạo ra một trang có cấu trúc giống trang chủ (tức là sau mỗi bài lại có thể nhận xét, chỉnh sửa, liên kết được ấy) thì làm thế nào ?
VD như bên blog của mình có trang GIỚI THIỆU, muốn trong đó có nhiều bài viết, mỗi bài hiện ra như ở TRANG CHỦ, thì làm thế nào ?
(Mình thấy bên bạn có nhiều trang như vậy, VD như trang THỦ THUẬT chẳng hạn...)
@ svc.club: Chào bạn mỗi trang bạn chỉ có thể đăng một bài, nếu đăng nhiều hơn xẽ rất dài
Trả lờiXóaCòn trang Thủ thuật của mình là mình sử dụng các bài dăng có cùng chủ đề sau đó gán cho chúng một nhãn chung như vậy khi bạn Click chọn nhãn đó thì nó xẽ hiện ra danh sách các bài đó :)
Chúc thành công!
bác có cách nào để ko hiển thị lại bài đăng khi qua trang thứ 2 ko? vì khi bài đăng ở trang chủ đã có nên khi qua trang 2 bài đăng bị trùng với bài đăng nằm trên trang chủ:))
Trả lờiXóaVậy hả ? Thế bạn dạy mình cách làm được không ? (Hình như mình đọc đâu đó ở trang của bạn rùi nhưng ko nhớ, hjhj)
Trả lờiXóaThks nha. :)
@ svc.club: 1- Để tạo các Laber (Nhãn) cho bài viết khi viết bài bạn có thể tạo Nhãn cho các bài về một chủ đề nào đó như Thủ thuật blog chẳng hạn, khi viết các bài liên quan đến Thủ thuật blog thì bạn gán cho bài đó Laber "Thủ thuật blog" như vậy khi bạn nhấn vào laber hoặc các liên kết của laber đó thì nó xẽ liệt kê danh sách các bài viết của bạn liên quan đến lĩnh vực Thủ thuật blog đó.
Trả lờiXóa2 - Để gắn laber cho các bài viết bạn để ý phía dưới góc trái của ô bài viết có phần nhãn đó bạn có thể đánh tên nhãn vào ô đó sau đó xuất bản bài viết là Ok. lần sau nếu muốn gán laber đó cho bài viết khac nữa bạn chỉ cần ấn vào chữ "Hiện thị tất cả" đằng sau chữ :"Nhãn" sau đó chọn nhãn đó là Ok
3- Bạn vào Thiết kế -> Thêm Tiện Ích -> Nhãn Sau đó bạn chọn nhãn mà bạn muốn hiển thị và kéo tiện ích nhãn đó đến vị trí bạn ưng ý. Như vậy khi bạn Click chuột vào Nhãn đó thì tất cả những bài thuộc nhãn đó xẽ được hiển thị trên Labe nhãn đó
Có gì thắc mắc bạn cứ Comment
Chúc thành công
Chúc thành công =))
Về phần tạo Nhãn, mình đã làm được rồi, ý mình là hướng dẫn cách tạo ra trang giống như trang Thủ thuật của bạn cơ (tức là ấn vào trang đó nó cũng hiện ra các phần, bài như là hiện ra ở Trang chủ) :( :(( .
Trả lờiXóaCám ơn nhé !
@ svc.club: Bạn có thể tham khảo bài viết này :P
Trả lờiXóaChúc thành công!
Hay quá! Mình làm được rồi, cảm ơn bạn nha! =)) =)) =))
Trả lờiXóa@ Admin: Chúc mừng bạn :P
Trả lờiXóaem làm kái phân trang mà nhiều cái khác nó toàn hiện ra cái: Có trên một tiện ích được tìm thấy bằng: HTML3. Các ID tiện ích phải là duy nhất.
Trả lờiXóachẳng thể nào mà nghịch tiếp đc
anh dạy em cách sửa cái. gửi vào HoChienQuyet@gmail.com giúp em nhé, thanks anh
@Chien Quyet Ho Cái đó là Blog của em đã có một Widget HTML3 trong khi Code của em lại có them một thẻ HTML3 nữa. Em nên kiểm tra lại Code mới khi em tiến hành làm:3) :3) :3) :3)
Trả lờiXóaNamkna giúp mình bỏ phân trang với, toàn bị mất bài khi xem các bài đăng theo 1 chủ đề nào đó thôi
Trả lờiXóa@Nguyễn Hải ™ Cái này bạn phải mày mò dần dần thôi. Bạn chị mở rộng tiện ích mẫu tìm thường thìu nó nằm ngay sau thẻ có dận tương tự như sau:
Trả lờiXóa<!-- ... page Navigation ... -->
Cái phần dấu 3 chấm (... thì tùy mỗi Blog một khác.
- Để bỏ các CSS của cái Navigation bạn tìm các code CSS có dạng:
.Navigation
hoặc:
#Navigation
tùy theo Blog của bạn dùng Class như thế nào, Class này nằm trong thẻ <div class='.....'>. của phần phân trang đó.
Chúc thành công!
Muốn tạo khoảng cách giữa mục phân trang so với main body thì thay đổi sao bác? Bác vào xem thử http://tanchau123.blogspot.com :C)
Trả lờiXóa@Tanchau123 Thêm thuộc tính margin vào đoạn CSS trong code trên như sau:
Trả lờiXóa.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
margin-top:10px
}
- thay số 10 trong đoạn trên thành số khác cho phù hợp nha. :3) :3) :3)
số var pager_max_main = 5;
Trả lờiXóavar pager_max_results = 20;
quan hệ thế nào nhỉ, mình thấy chạy ko chính xác.
Tại trang chủ var pager_max_main ko có tác dụng, phải tự cài đặt trong phần cài đặt bài đăng.
Khi vào label liệt kê bài đăng thì pager_max_main cũng ko có tác dụng, nó tại lần liệt kê đầu tiên nó liệt kê hết, click lần 2 thì mới chạy đúng, phân trang dựa theo pager_max_results
thật chẳng hiểu ra làm sao!
@Thao Trinh Do vậy chúng ta cần kết hợi vowius các sau: » Sửa lỗi không phân trang khi xem theo nhãn
Trả lờiXóabạn cho mình hỏi blog mình cài giao diện vào, mình chỉnh bố cục bài đăng hiển thị 1 trang là 20 và vào code html chỉnh lại là:
Trả lờiXóavar postperpage=20;
var numshowpage=6;
và khi xem blog thì chỉ có 7 sản phẩm hiển thị lên và chỉ có 1 trang được hiển thị những sản phẩm khác không hiển thị.
Trang mình đây: hoicungmua.com
công nhận cái này rất ổn, nhưng nó lấy IDblog thì quá chán, ko biết cách nào ko cần nó mà vẫn ổn được như vậy
Trả lờiXóa@Thao TrinhSử dụng ID để đảm bảo các bài đăng của bạn được load feed đầy đủ thôi mà. Mình thấy ad có giới thiệu khá nhiều bạn về cái phân trang này đó bạn Đây nè
Trả lờiXóaMình vừa bị xóa blog! chán ghê :4) sao nhiều trang đăng crack,kay có việc chi đâu nhỉ ?
Trả lờiXóaCó ai giúp mình vấn đề này không:
Trả lờiXóabạn cho mình hỏi blog mình cài giao diện vào, mình chỉnh bố cục bài đăng hiển thị 1 trang là 20 và vào code html chỉnh lại là:
var postperpage=20;
var numshowpage=6;
và khi xem blog thì chỉ có 7 sản phẩm hiển thị lên và chỉ có 1 trang được hiển thị những sản phẩm khác không hiển thị.
Trang mình đây: hoicungmua.com
@Thức Nguyễn Xuân Bạn xem cách khắc phục ở Bài viết này nha.
Trả lờiXóaBạn cho mình hỏi cách tạo thêm tiện ích dưới chân bài đăng như thế nào ? (Không phải ở phần footer). Vì mình muốn chèn tiện ích phân trang dưới đó, đỡ phải sửa code. Xem giúp mình nhé !
Trả lờiXóaTìm đoạn:
Trả lờiXóa<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>
sửa :showaddelement='no' thành showaddelement='yes'
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>
Không phải vậy bạn ơi, ý mình là thêm tiện ích ngay dưới chân bài đăng, không lùi sâu quá xuống footer thôi. Chỉnh như trên là tiện ích nằm phía trên bài đăng mất rồi. Bạn chỉnh lại dùm mình với !
Trả lờiXóahelp help !
Trả lờiXóaNếu muốn nó nằm ngay dưới bài đăng thì dán code tiện ích vào sau thẻ <data:post.body/> trong chỉnh sửa HTML nha.
XóaTemp của mình có 4 đoạn cơ, dán vào phần nào vậy ?
Trả lờiXóaMình sửa rồi, nhưng nó báo lỗi: "More than one widget was found with id: Blog1. Widget IDs should be unique."
Trả lờiXóaDán vào trước thẻ </body> cũng được nha bạn.
XóaMình có việc muốn hỏi bạn chút, đó là mình vừa kiếm dc tiện ích phân trang mà không phải sửa code template, nhưng đoạn code này lại hiển thị phân trang ra cả trang chủ và mình muốn thêm nút "last" để đi tới cuối. Đây là trang web mình tìm dc code:
Trả lờiXóahttp://seotopseo.blogspot.com/2013/06/page-number-navigation-code-phan-trang.html?showComment=1375000993406#c4475204079861181700
Bạn giúp mình vụ này nha !
Thay chữ bạn thay thê: Previous và Next ở đoạn sau:
Xóavar upPageWord ='Previous';
var downPageWord ='Next';
nếu muốn hiển thị ở trang bạn muốn thì xe bài sau: XEM
-p/s: Đoạn coede đó với blog trên 500 bài hiển thị không chính sác đâu bạn ak.
không phải là thay thế chữ bạn ơi, tức là mình muốn thêm một nút nữa, nằm bên phải nút next, vd: "previous 1 2 3 next last" ấy. Nút "last" sẽ chuyển sang trang cuối cùng mà không cần ấn next nhiều ! Bạn xem lại cho mình nhé !
Trả lờiXóaNếu thêm nút đó sẽ phải viết lại đoạn javascripts đó bạn ak. Vì hiện tại các biến chưa khai báo.
Xóaphiền bạn thêm cho mình đoạn code đi, thanks nha !
Trả lờiXóaMấy hôm nay mình bận qua không có nhiều thời gian lắm để viết code đó bạn ak.
XóaAnh ơi anh xem trang này hộ em
Trả lờiXóaphân trang nó cứ biij lỗi trang thì được 5bai trang thì 6baif ....trong khi mặc định em đặt là 10 bài
em cũng đã sữ dụng cách sữa lỗi của em mà không đc
: http://vinet360.blogspot.com/
anh cho em hỏi lỗi này là lỗi gì vậy
Trả lờiXóaThe widget with id "Blog222" contains at least two b:includable elements with the same id: "page-navi". All b:includable elements should have a unique id for a given widget.
Trùng ID "page-navi" bạn ak.Mỗi id này chỉ được xuất hiện 1 lần trong blog, Hãy kiếm tra lại xem thủ thuật mơi của bạn có đoạn đó không nha, Nếu có thì hãy lựa chọn thủ thuật mới .
XóaBạn có thể giúp mình remove cái phân trang cũ không. Mình dùng 1 cái template có sẵn up lên thì nó đã có sẵn page navi rồi nhưng lại muốn dùng cái của bạn.
XóaBạn xóa các đoạn có dạng:
Xóa#pagenavi{overflow:hidden;padding:8px 0}#pagenavi .pages{float:right;height:22px;line-height:20px;font-size:10px;color:#505050;margin-top:-5px;padding:5px}#pagenavi .current{background-color:#F0F0F0;border:1px solid #B4B4B4;background-image:url(http://2.envato-static.com/images/common/backgrounds/white_line.png?1311218499);background-repeat:repeat-x;background-position:top;border-image:initial;padding:7px}#page_numbers{float:left;line-height:20px;font-size:9px;color:#505050;padding:5px}
.pagenavi a,.pagenavi span {
display:inline-block;
margin: 0 3px;
padding:0;
width:34px;
height:32px;
line-height:34px;
text-align:center;
text-decoration:none;
color:#666666;
border-bottom: 2px solid #cccccc;
}
.pagenavi a:hover,.pagenavi .current {
background: #e54c10;
color:#fff;
font-weight:bold;
border: none;
height:34px;
}
.pagenavi .pages {}
.column {
width:220px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
Còn đoạn JS thì gửi mẫu vào mail tavannam01@gmail.com mình chỉnh cho nha.