Tạo phân trang ở trang chủ cho Blogspot

Ngày Thứ Tư, 1 tháng 2, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tạo phân trang ở trang chủ cho Blogspot
Chúc bạn xem tin tức vui vẻ !!

Chắc hẳn một số bạn đã không lạ với việc tạo các phân trang cho blogspot, tuy nhiên cũng không ít bạn chưa tiếp xúc với thủ thuật này. Có một số bạn hỏi mình về việc này nên hôm nay mình xin chia sẻ lại cách để thực hiện thủ thuật tạo phân trang ở trang chủ cho Blogspot. Ở một số template dành cho Blogger có sẵn một dạng phân trang này, tuy nhiên không nhiều và nếu blog của bạn chưa có thì thêm tiện ích này như thế nào? Bạn có thể xem ảnh minh họa và các bước thực hiện bên dưới

Hình ảnh minh họa

1 . Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa phần Post và chọn số bài đăng hiển thị là 5.


4. Chọn chỉnh sửa HTML (Edit HTML)
5. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
6. Tìm đến tất cả code như bên dưới (hoặc tương tự)

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

7. Thêm vào nó code màu đỏ như bên dưới

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=5&quot;'><data:label.name/></a>

8. Chèn code bên dưới vào trước thẻ ]]></b:skin>

.showpage{
padding: 0px 0px;
margin:0 0px;
text-decoration:none;
background:transparent;
color:#222222;
border:1px solid transparent;
font-family: Arial, Verdana;
font-size: 15px;
text-shadow:none;}

.showpageOf{
font:15px Arial,Verdana;
color: #333333; /* màu chữ của phần pages*/
background:transparent;
text-shadow:none;
padding:2px 6px 2px 6px;
margin:0px 4px 0px 0px;
}
.showpageNum a, .showpage a{
font-weight:bold;
border:1px solid #eee; /* màu của đường viền các số phân trang*/
margin-right:3px;
padding:2px 6px 2px 6px;
font:15px Arial,Verdana;text-decoration:none;
background: #ccc; /* màu nền các số phân trang*/
color:#333333; /* màu chữ các số phân trang*/
text-shadow:none;}

.showpageNum a:hover,.showpage a:hover{
padding:3px 6px 3px 6px;
color:#ff0033; /* màu chữ các số phân trang khi rê chuột*/
background:#e5f5f5; /* màu nền các số phân trang khi rê chuột*/
border: 1px solid #ccc;}

.showpageArea{
margin:7px 0;
font:12px Arial,Verdana;color:#666}

.showpagePoint{
color:#ffffff; /* màu chữ của số phân trang đang xem*/
font: bold 15px Arial,Verdana;text-decoration:none;
margin-right:3px;
padding:3px 7px 3px 7px;
background: #0000ff; /* màu nền của số phân trang đang xem*/
border:1px solid #044444;
text-decoration:none;
text-shadow:none;}

9. Bạn chèn tiếp code bên dưới vào trước thẻ </body>

<script type='text/javascript'>
var pageCount=5; // số bài viết trên mỗi trang
var displayPageNum=5; // số hiển thị trong phân trang
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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+'&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){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

10. Cuối cùng save template lại

Chúc các bạn thành công!!!