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

(Traidatmui.com) – 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 bạn thành công

Tham khảo bloggertricks.com

Xem khác cùng chủ đề

7 nhận xét | Viết lời bình

4/19/2011 10:59:00 CH Trả lời

Mình làm giống bạn nói nhưng vẫn ko được.
Bạn có thể giúp mình được ko ?
vì mình rất cần cám ơn bạn trước nhé

Admin
4/20/2011 12:12:00 SA Trả lời

Bạn hãy save code ở bước 4 đúng vị trí trước thẻ </body> thì nó sẽ hoạt động bình thường, nếu là lỗi khác bạn vui lòng nói rõ hơn mình mới biết được?

9/25/2011 01:21:00 SA Trả lời

mình làm rồi nhưng nó vào thì không hiển thị ở labels, ở labels phải bấm bài đăng cũ hơn 1 cái nó mới xuất hiện

Admin
9/25/2011 02:41:00 SA Trả lời

ThuongPro.Kool: Đối với nhãn có bài viết ít hơn 5 nó sẽ không hiển thị và bạn có thể xem bài viết tại đây để tùy chỉnh số bài viết hiển thị ở trang nhãn lại cho phù hợp nhé

9/30/2011 01:42:00 SA Trả lời

nhờ TĐM xem hộ mình ! 2 cái bài trên cùng nó bị lỗi :(
http://loadzoom.com

10/17/2012 05:10:00 SA Trả lời

TĐM có thể chỉ mình tạo giao diện giống hệt như trong hình minh họa trong bài được không?
Xin cảm ơn rất nhiều!

Admin
10/18/2012 07:52:00 SA Trả lời

Tùy thuộc vào màu nền của mỗi blog khac nhau mà chỉnh sửa cho phù hợp nhe bạn

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang