Number Page Navigation in Blogger

2
5
views

Replace the default Older post, Newer Post links with Number Page navigation in Blogger.
It looks better and very easy to access your blog for users.

Here You’ll find many styles for the navigation. Choose which your blog suits better. 🙂

STEP 1- Post Count
Sign into your Blogger account » Settings » Formatting
Choose the number of posts you want to display on homepage, as you can see in the image bellow.


STEP 2 – Adding CSS Style

Go to Dashboard > Layout > Edit HTML. Always Download Full Template for Backup.
Do NOT click on Expand Widget Templates. Now look for the following code

]]></b:skin>

 Now add following code ABOVE it.

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

This above is one style code. But you can choose your suitable one.
  CSS Style
  1. Style 1
  2. Style 2
  3. Style 3
  4. Style 4
  5. Style 5
  6. Style 6

Demo of Above Styles

  1. Style 1
  2. Style 2
  3. Style 3
  4. Style 4
  5. Style 5
  6. Style 6

STEP3
Go to Design » Edit html » tick the expand widget templates

Scroll down to the bottom of the template code and find this

</body>

PASTE this code above that line

<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:blog.pageType != “static_page”‘>
<script type=’text/javascript’>
var pageCount=5;
var displayPageNum=5;
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>
</b:if>
</b:if>

 In that above code, Edit the part that I highlighted in red color according to Step 1. It determines the number of posts that to be displayed per page. (Make sure, the number you set is same like the one in Step 1)

STEP4

Search for all the occurrences of this code 

 ‘data:label.url’

and replace it with this

  ‘data:label.url + &quot;?&amp;max-results=5&quot;’

 Again, the number in the above line depends on the number you set in the STEP 1.

Save changes. View your blog. Its ready now. 
If you are facing any problem with this please feel free to comment here.

Style Diaries: World Fashion from Berlin to Tokyo'Blogger With Bullhorn And Audience' Wall Decal - 48"W x 48"H Removable GraphicStyle Yourself: Inspired Advice from the World's Fashion Bloggers'Blogger' Wall Decal - 18"W x 14"H Removable Graphic

Facebook Comments

2 COMMENTS

Leave a Reply