Trang chủ > Thủ thuật blog > Tạo thanh phân trang trên cho blog

Tạo thanh phân trang trên cho blog

Để có thể thu hút người đọc đến blog, bạn hãy tạo nên sự tiện lợi nhanh chóng cho họ. Thanh phân trang sẽ giúp bạn phân các bài hiển thị ở trang đó và giúp người đọc nhanh chóng sang trang kế tiếp hoặc hơn nữa. Để tạo một thanh phân trang như hình mẫu bên dưới,ta có các bước làm như sau:

Hình minh họa

Các bước thực hiện:

1.Đăng nhập blog
2.Vào chỉnh sửa Code HTML (không nhấp vào Mở rộng tiện ích)
3.Chèn đọan code CSS bên dưới trên dòng
]]>

.showpageArea {font-size: 11px; width:auto; background: url(http://lh3.ggpht.com/_TaHzV-QgYq0/SqYl_s2-sgI/AAAAAAAABfI/-ucZojg1pDI/2.GIF) repeat left top padding: 0px;
color:#003366;
text-align:center;}

.showpageArea {padding:2px;
margin-top:0px
;margin-bottom:0px; }

.showpageArea a {
text-decoration: none;
background-image:url(http://lh5.ggpht.com/_TaHzV-QgYq0/SufUOvv_uII/AAAAAAAACqg/rQbAoQTjFYk/1.PNG);
border: 1px solid #505050;
margin:0px 0px 0px 0px ;
padding: 4px 4px !important;
padding: 4px 4px ;

}
.showpageArea a:hover { text-decoration: none;
font-size:16px;
border: 1px solid #505050;
color: #153e7e;
background:#ff0000 url(http://lh3.ggpht.com/_TaHzV-QgYq0/Sup0SWmLMDI/AAAAAAAACwg/_E8Ve4Zzuxc/untitled.jpg) ;
}
.showpageNum a {
background-image:url(http://lh5.ggpht.com/_TaHzV-QgYq0/SufUOvv_uII/AAAAAAAACqg/rQbAoQTjFYk/1.PNG) ;

border: 1px solid #505050;
color: #ff0000;
font-weight:normal;
padding: 4px 4px !important;
padding: 4px 4px ;
margin:0px 0px 0px 0px;
text-decoration: none;
}
.showpageNum a:hover { text-decoration: none;
font-size:14px;
border: 1px solid #333;
color: #153e7e;
background-image:url(http://lh3.ggpht.com/_TaHzV-QgYq0/Sup0SWmLMDI/AAAAAAAACwg/_E8Ve4Zzuxc/untitled.jpg);}

.showpagedownPageWord a { float:left;
background:url(http://lh5.ggpht.com/_TaHzV-QgYq0/SufUOvv_uII/AAAAAAAACqg/rQbAoQTjFYk/1.PNG) no-repeat 0 0;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0px 0px 0px 0px;
padding:2px;
color:#333;
text-decoration: none;}

.showpagedownPageWord a:hover { float:left;
background:url(http://lh5.ggpht.com/_TaHzV-QgYq0/SufUOvv_uII/AAAAAAAACqg/rQbAoQTjFYk/1.PNG) no-repeat 0 0;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0px 0px 0px 0px ;
padding:2px;
color:#FFF;
text-decoration: none;}

.showpagePoint {
text-decoration: none;
font-size:14px;
font-weight: bold;
padding:1px 6px 3px 6px !important;
padding:2px;
margin:0px 0px 0px 0px ;
text-align:center;
border: 1px solid #505050;
color: #151B8D;
background-image:url(http://lh5.ggpht.com/_TaHzV-QgYq0/SufUOvv_uII/AAAAAAAACqg/rQbAoQTjFYk/1.PNG);}

.showpage a:hover {text-decoration: none;
font-size:13px;
border: 1px solid #505050;
color: #153e7e;
background-image:url(http://lh3.ggpht.com/_TaHzV-QgYq0/Sup0SWmLMDI/AAAAAAAACwg/_E8Ve4Zzuxc/untitled.jpg);
}
.showpageNum a:link {
background-image:url(http://lh5.ggpht.com/_TaHzV-QgYq0/SufUOvv_uII/AAAAAAAACqg/rQbAoQTjFYk/1.PNG);
border: 1px solid #505050;
color: #ff0000;
font-weight:normal;
padding: 4px 4px !important;
padding: 4px 4px ;
margin:0px 0px 0px 0px;
text-decoration: none;
}

.showpage a:link {
background-image:url(http://lh5.ggpht.com/_TaHzV-QgYq0/SufUOvv_uII/AAAAAAAACqg/rQbAoQTjFYk/1.PNG);
border: 1px solid #505050;
color: #ff0000;
font-weight:normal;
padding: 4px 4px !important;
padding: 4px 4px ;
margin:0px 0px 0px 0px;
text-decoration: none;
}

.showpageNum a:hover {font-size:14px;
border: 1px solid #505050;
color: #153e7e;
text-decoration: none;
margin:0px;
background:url(http://lh3.ggpht.com/_TaHzV-QgYq0/Sup0SWmLMDI/AAAAAAAACwg/_E8Ve4Zzuxc/untitled.jpg);}


Các bạn có thể chỉnh sửa code CSS theo sở thích của mình
4.Tìm đến đoạn code sau:



Thêm đoạn code dưới vào sau đoạn code vừa tìm được:


function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1; var isPage = thisUrl.indexOf(“/search?updated”)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(“/search/label/”)+14,thisUrl.length) : “”;
thisLable = thisLable.indexOf(“?”)!=-1 ? thisLable.substr(0,thisLable.indexOf(“?”)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;
var pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;
var labelHtml = ‘‘;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=”){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}} } }//end if(post.category){
itemCount++;
} }else{
if(title!=”){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum; }
if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
} } itemCount++; } }
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’
‘;
}else{
upPageHtml = ‘‘+ upPageWord +’‘;
} }else{
upPageHtml = ‘‘+ upPageWord +’‘;
}
fFlag++;
}
if(p==(thisNum-1)){
html += ‘ ‘+thisNum+’‘;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1
‘;
}else{
html += ‘1‘;
}
}else{
html += ‘‘+ (p+1) +’ ‘;
} }
if(eFlag ==0 && p == thisNum){
downPageHtml = ‘ ‘+ downPageWord +’‘;
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ‘‘+ firstPageWord +’ ‘+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’
‘+upPageHtml+’ ‘+html +’ ‘;
} }
html = ‘
All ‘+(postNum-1)+’ pages : ‘+html; if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘ ‘+endPageWord+’‘;
}
if(postNum==1) postNum++;
html += ‘

‘;
if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName(“pageArea”);
var blogPager = document.getElementById(“blog-pager”);
if(postNum <= 2){
html =”;
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html =”;
}
if(blogPager){
blogPager.innerHTML = html;
} } }

Bạn cần chú ý:var pageCount = 5;
Số 5 trong đọan code là để hiển thị số lượng các bài viết trong 1 trang. Thay đổi nó tùy theo bạn, có thể 2 hoặc 3…
var displayPageNum = 3;
Code này để hiển thị số lượng trang web được liệt kê trên thanh “page navigation”.
5.Save lại và xem thử nhé
Tuy nhiên, nếu bạn sử dụng cách trên mà bị lỗi không thực hiện được thì bạn có thể vào đây để download code về và dán thẳng vào HTML/Javascript và chuyển nó xuống cuối trang.
Chúc bạn thành công

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s