Friday, 11 April 2014
Add Beautiful Page Navigation/Number to Blogger
Do you like this ?
Why adding page number to blogger ? the answer is really simple, Blogger do not have page navigation from before as default. They have older and newer post. That's do not looks good. So simply add this stylish and simple page number. So that your readers will be able to go to any page they like easily. The page number will looks like this below image after you add this successfully. I will be showing you the very easy tutorial to add this widget.
So let's get started in the name of Allah
So let's get started in the name of Allah
- First go to Blogger > Layout > and choose Add a Gadget
- Then from there Choose Html/Javascript and paste all the below codes.
<style type="text/CSS">.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #7AA1C3; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #7AA1C3; background-color:#F6F6F6; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #7AA1C3; background: #F6F6F6; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #7AA1C3; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#7AA1C3; } </style><script type="text/JavaScript">function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 2; var displayPageNum = 5; 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">'+thisNum+'</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 = ''+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>';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>
- If you are using domains like .info or .biz, then replace .com with last part of your domain, IF you Blogspot.com keep it Unchanged
- NOW CLICK ON SAVE, BUt still you have some works, DRAG THE HTML/JAVASCRIPT Widget below your Blog posts widget. as shown in below Flash Image.
- Now save your template.
If you cannot do this, let me know i will help you in sha Allah.
courtesy MyBloggerTricks

This post was written by: Rashedul Islam
Assalamualaikum, I am Rashedul Islam Arman from Chittagong,Bangladesh. Founder of this Blog Alhamdulillah.If you Have any Problem,Complain,Suggestion or for Anything don't Hezitate to Contact ME,You can Directly contact me on my Facebook I'D
Subscribe to:
Post Comments (Atom)
0 Responses to “Add Beautiful Page Navigation/Number to Blogger”
Post a Comment