Page navigation bar in blogger

In this tutorial we will learn how to add a page navigation bar with numbers for your blog Blog spot.et before starting it is re comm, ndé to make a backup of your model blogger.

After you make a backup of your blog template , use the following procedure:

1 Log into your blogger account and Presentation >> Edit HTML and look for the following line of code:

]]></b:skin>

And just before that line, add this CSS code:

.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; }

2 Add the following java script code :

Before adding the JS code below Search the following code :

<b:section class=’main’ id=’main’ showaddelement=’yes’> <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/> </b:section>

And if you do not find the previous code, look for a similar code that begins:

<b:section class=’main’ id=’main’ ......>et se termine par </b:section>

Directly after the </ b: section> , add the following code :

<script type='text/javascript'> var home_page_url = location.href; var pageCount=10; var displayPageNum=6; var upPageWord ='Previous'; var downPageWord ='Next'; 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 = '<a href="/">'+ upPageWord +'</a>'; }else{ upPageHtml = '<a href="'+htmlMap[p]+'">'+ upPageWord +'</a>'; } fFlag++; } if(p==(thisNum-1)){ html += ''+thisNum+''; }else{ if(p==0){ html += '<a href="/">1</a>'; }else{ html += '<a href="'+htmlMap[p]+'">'+ (p+1) +'</a>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = ' <a href="'+htmlMap[p]+'">'+ downPageWord +'</a>'; eFlag++; } } } if(thisNum>1){ html = ''+upPageHtml+' '+html +' '; } html = '<div
class="showpageArea"> Pages ('+(postNum-1)+')'+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 = '<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>'; }else{ upPageHtml = '<a href="'+htmlMap[p]+'">'+ upPageWord +'</a>'; } fFlag++; } if(p==(thisNum-1)){ html += ''+thisNum+''; }else{ if(p==0){ html = labelHtml+'1</a>'; }else{ html += '<a href="'+htmlMap[p]+'">'+ (p+1) +'</a>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = ' <a href="'+htmlMap[p]+'">'+ downPageWord +'</a>'; eFlag++; } } } if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"> Pages ('+(postNum-1)+')'+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; } } </script> <script type='text/javascript'> 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 && thisUrl.indexOf(".html")==-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>

Register your blog template.
And to customize your navigation bar you can change the following parameters:

each page count = 10;

Check the number messages per page 10 messages / Page , directory you can increase or dimmer the number of messages.
Note: The number of pages should be the same as your blogger account parameter and to adjust this parameter , follow the circuit : Dashboard >> Settings >> Layout >> Show at most.

The setting at the Show must be equal to pageCount.

Page navigation bar in blogger

By: Unknown on Saturday 7 February 2015 | 22:50

Post a Comment

Like on Facebook!

Popular posts

Counter