Chúc bạn một ngày tốt lành

Chủ Nhật, ngày 25 tháng 4 năm 2010

Tạo thanh "Page Navigation" (phân trang) cho blogspot

VnTim™  ^-^ Bài viết trước mình đã hướng dẫn việc thay đổi liên kết "xem bài cũ hơn" và "xem bài mới hơn" bằng hình ảnh. Bài này mình giới thiệu cách tạo 1 "Page Navigation" dùng để phân trang bài viết trong blog.


Đây là hình ả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 ]]></b:skin>


.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

Các bạn có thể chỉnh sửa code CSS theo sở thích của mình, như màu chữ, màu nền...

4. Tìm đọan code sau


<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='blog1' locked='true' title='blog posts' type='blog'/>
</b:section>

thêm đọan Javascript bên dưới ngay sau dòng </b:section>

<script type="text/javascript">

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 = '<span class="showpagenum"><a href="/search/label/'+thislable+'?&max-results='+pagecount+'">';

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 +'</a></span>';
}else{
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"><u>'+thisnum+'</u></span>';
}else{
if(p==0){
if(islablepage){
html = labelhtml+'1</a></span>';
}else{
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++;
}
}//end if(p>=(thisnum-displaypagenum-1) && p<(thisnum+displaypagenum)){
}//end for(var p =0;p< htmlmap.length;p++){

if(thisnum>1){
if(!islablepage){
html = '<span class="showpage"><a href="/">'+ firstpageword +' </a></span>'+uppagehtml+' '+html +' ';
}else{
html = ''+labelhtml + firstpageword +' </a></span>'+uppagehtml+' '+html +' ';
}
}

html = '<div class="showpagearea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">page '+thisnum+' of '+(postnum-1)+': </span>'+html;

if(thisnum<(postnum-1)){
html += downpagehtml;
html += '<span class="showpage"><a href="'+htmlmap[htmlmap.length-1]+'"> '+endpageword+'</a></span>';
}

if(postnum==1) postnum++;
html += '</div>';

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;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpagecount&max-results=99999" type="text/javascript"></script>

Chú ý 1 số đọan code sau:
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".


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

4 Comments:

SÀN GỖ TPHCM said...

Rất hay,mình sẽ thử thanks !!!

Preview Camera DSLR said...

mình đã thử nhưng gặp phải lỗi này:"The reference to entity "max-results" must end with the ';' delimiter." mong bạn giúp đỡ :)

VnTim™ said...

Lỗi này là do bạn chưa đổi & thanh & theo chuẩn cua XML

Black Sheep said...

mình dùng classic template thì phải làm thế nào ??

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam