Home » Blogger Tutorials, Tricks and Hacks » Blogger Posts / Archive Tricks » Adding Numbered Page Navigation Bar For Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding Numbered Page Navigation Bar For Blogger

Adding Numbered Page Navigation Bar For Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

42,105 views

hi all, today we are going to learn how to add page navigation bar with numbers for blogspot blogs,

i’m sure that most of you have a lot of posts and the default blogger way to navigate between new post and old post is boring. what if your visitors wants to read for your oldest posts?
should he keep clicking on “older posts”, No.
You should apply this hack for your template, it’s one of the most useful blogger tricks ever.

so lets see how to do it.

Caution : Please backup your template (Download Full Template) Before making any changes.
Step 1: Adding The CSS Code.

Log into your blogger account and go to,
Dashboard >> Layout >> Edit html.
And find the following code.

]]></b:skin>

And just before it Add the next 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;
}
Step 2: Adding The Java Code.

Find the next code Or some similar code

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

And After the </b:section> Tag add the next 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+'&amp;max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}else{
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
}else{
if(p==0){
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';

}else{
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}

html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

 

var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
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+'&amp;max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}else{
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
}else{
if(p==0){
html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
}else{
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>

And Click “save template
In the above code you may only edit four lines to customize your navigation bar.

var pageCount=10;

In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.
Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Formatting >> Show >> 10 posts

var displayPageNum=6;

Number 6 here control the number of pages that will be shown in the navigation bar.

var upPageWord ='Previous';

var downPageWord ='Next';

if you want to change the language or just change it to any thing, please change Previous for example to Older

Final Step

This blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.

1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.

2. go to, Dashboard >> Layout >> Edit html.
And find the following code.

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

And replace it with the following code.

<script type='text/javascript'>
var lblname = &quot;<data:label.name/>&quot;;

lblname2 = encodeURIComponent(lblname);
var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;
document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>

And Click “save template
We are done.

Demo.

To see how it looks see this demo blog
Big thanks for Abu Farhan & Mohamed Rias

Liked It ? Please Share

Comments

70 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Eduard says:

    На этой теме не работает. ;-(

    http://jazz-portal.blogspot.com/

  2. Eduard says:

    This theme does not work. ;-(

    http://jazz-portal.blogspot.com/

  3. vineeth says:

    not worked in my blog

  4. electrinick says:

    This trick works in my blog.But I did not use ‘final step’ because I could not find the code. I haven’t seen any problem so far. I hope I don’t :)

  5. Max says:

    hi all, this trick definitely working perfectly, you can see the demo, or read electrinick comment, make sure that you do it in the right way.

  6. Abu Farhan says:

    I just check this post, I’ll try to answer any problem in this hack
    @Eduard I did’t see script in you blog
    @vineeth yor page navigation can’t show in your first page but in your Label view you can see page navi. problem maybe in your template not show navi in first view
    @electrinick Where’s you url

  7. Abu Farhan says:

    @vineeth just check again your blog, problem because #blog-pager{text-align:center; width:640px; overflow: hidden; margin:5px 5px 5px 5px; padding:5px 0px;}

    Overflow hidden

  8. Max says:

    hi Abu Farhan, i’m really happy to see you here, and i appreciate your comments and efforts.
    you are surly always welcome here,

  9. Abu Farhan says:

    @Max, ok I’ll try to answer if some problem about this hack. The problem usually because no blog-pager id.

  10. boholik says:

    i can’t find this code

    • Max says:

      hi boholik, i think you can’t find it because you didn’t added the labels gadget to your template, please provide me with your blog link so i can help you.
      thanks.

  11. Good job….thank you

  12. miko says:

    good joob

  13. ajinkyakambe says:

    hey i am having problem with add these widjet please help me …………

  14. oh dear,
    thanks for your tutorial. i have been aplicate to blog. see my blog. :D

  15. dbhmusic says:

    This is great, but Not work all template.

    • Max says:

      @ dbhmusic , oh yes, this can’t go perfectly on all templates, specially the customized templates, tell me whats wrong with you??

  16. Aris says:

    Hi,

    Could someone please help me with my blog template. I’ve searched all over the web on how to add missing ‘newer/older posts’ navigation on my template. But I couldn’t find it. Here is my blog http://gunnersbrunei.blogspot.com/

    • Max says:

      @ Baloch, thanks , all visitors now can see this trick added and working perfectly to alot of blogs.

  17. capunk says:

    Final step doesnt work even after I adding label ithin the widget

    • Max says:

      @ capunk, the final step isn’t very necessary one. if the widget works with your blog with out it.

  18. luckykhera says:


    not im my html code

  19. HighSpeedDLS says:

    it doesn’t wrk..

  20. SostyPasha says:

    thanks nice post :)

  21. BEBEN says:

    Unexpected surprise, turned out to BOS Abu Farhan visit to here, too. A deficiency of this hack, unfortunately not in the add image in CSS it (unfortunately ih) (English version translate google..LoL)

  22. vamp6x6x6x says:

    I finally got it had to try it three times

    • Max says:

      @ vamp6×6x6x, i’m glad for you, and i wish all to make all visitors see your comment that confirm that this hack working perfectly, it just needs you concentration while doing it.

  23. Damion says:

    Thanks for the info. It worked great!

  24. IsHu says:

    Thanks for the useful post….
    i added it in my page
    http://freeindiansms.blogspot.com its looking cool….
    the thing is i would like to add images in page number button is it possible?? pls help…

  25. Fatih says:

    Hurray.. !! I’ve Done..
    Nice hack..

  26. TheShadow says:

    Hi.This hack worked in my blog but now I find a little problem with total page count.My blog display 5 post per page.and now i am having 574 post.but total page count is still 100 or 101.I didn’t use final step because i find two same codes within it.So help me to solve it.

    • Max says:

      @ TheShadow, the final step have nothing to do with your problem, this hack still don’t work perfectly, me and another coders trying to find the best version of this hack.

  27. hi Abu Farhan, I tried this code to add the pagebar in my blog. But I have problem in adding the final step code and I am using so many labels in my blog, so it is necessary to me to add the final step code. Sir, Plz tell me what should I do to resolve this problem?

    • Max says:

      @ pradeep kumar, you have to add the labels widget first before trying to find the code in last step.

  28. king says:

    hi there,
    is still,does not working..
    please help me..
    i’ve already,try to follow the instructions..

    • Max says:

      Hi King, alot of people already applied this trick successfully, it might be a template problem, Coz every coder has it’s way to code the templates.

  29. mrjack says:

    Thanks for that :)

  30. Mahdi says:

    I can’t find



    code

    my template is FreshCircus

  31. may be the problem is here:
    I was fail to follow the final step either, but i follow abu rahman suggestion to replace Overflow hidden into overflow show….
    an then i looking for the source of problem…
    check this code:
    #blog-pager-newer-link {
    float: left;
    display:no;
    }
    #blog-pager-older-link {
    float: right;
    display:no;
    }
    #blog-pager {
    text-align: center;
    display:no;

    and i replace all the display: no; into display: yes:
    and the walllaa..i am succeed….without doing the final step!
    check my blog http://lumbungdownload.blogspot.com
    hehehehe just sharing comment from a newbie…..

  32. natasha says:

    hi max..i hv try yet nothing come out on d page so i did try the last step(finel) yet its stated there as wrong xml ..or sumting like dat which i cant save it after the ammend

  33. Maan says:

    @ natasha : same problem here..Where is max plz help mee…..

  34. natasha says:

    HELP!!!!HELP!!!! MAx where arr u honey??? i need u e help:d……

    @Maan… may be coz we r using tamplet…max is it bcoz of dat????

  35. natasha says:

    dear lumbung_download…. Yezzzzz…i hv try dis tried this trick..ITS WORKKKKKKKKKKKKKK FINALY….

    so friend u may try this

    #blog-pager-newer-link {
    float: left;
    display:no;
    }
    #blog-pager-older-link {
    float: right;
    display:no;
    }
    #blog-pager {
    text-align: center;
    display:no;

    If incase u couldn’t find the words ” display.no; ” u may just type them ure self….

    Gud luck…
    thks lumbung..muahhhhhh love yeah

  36. elle291 says:

    Numbered Page Navigation Bar works fine.
    How do I number the label?
    I find this code: . how do I do?

  37. Max says:

    lumbung_download, thanks for your comment, i’m sure it’ll help alot of people.

    @ natasha, sorry for being late, i was too busy the last few days,

    @ Maan, please try to follow natasha steps.

    i’m still here for any help.

  38. ZaFaR says:

    Max, Plz help me out here, I have try ur trick & it’s come in good display thanks for the trick, but the problem is it’s displaying the pages till 1 to 51 pages, and the pages are more than 200….. help me here bro…..

  39. elle291 says:

    Hello Max, I replaced this code (to say the date expr expr blog languageDirection href url label given date: label.name), but when I go to save the model gives me error.
    how do I do?

  40. dbhmusic says:

    i have problem with final step
    plz do something!

  41. YaniLavigne says:

    it work for me haha thank you very much its very useful for my page;)*

  42. sulltan says:

    hi,
    i have done its working but i cant make Final Step .. I find the code and Replace it with your given once . but got error . http://karshot.blogspot.com/ kindly help. :)
    thanks

  43. sulltan says:

    sorry for comments again and again . but i m only facing the problem in Final step . that is most important to control Labels . in final step i find 2 codes with yours given one when i try to replace i got error . please help me i will wait for your kind Comments . thanks http://karshot.blogspot.com/

  44. Abu Farhan says:

    Hi All I updated Page Navigation for blogger in here http://www.abu-farhan.com/tag/page-navi/

  45. bader says:

    it didnt work for me…i have a template from some other site and applied wat u told me and it didnt work can u please leave me ur email so i can give u my site code so u can possibly fix it for me

  46. ccybertron says:

    i succed place this hack in my blog
    http://www.takeaworld.com
    now i have 537 posts, but why in the post page only diplay 100 posts?
    Anyone can solve may problem?

  47. Marcio says:

    This page feature is awesome, but unfortunately I can`t find the code of the final step and maybe it`s because I`m using the latest cloud tags (labels) released. Any hints for me please?
    Thanks!

  48. III.5 says:

    Thanx for this, But it didn’t work on my blog whatever, allblogtools is best for me & who uses the blogger!!

    sorry for my bad English

  49. eb! says:

    the page numbers appear but without page numbers border, why it is happened?
    plz help me, thank u!

  50. Shinox says:

    Hi guys, I found the error on your trick.
    The last javascript, its bad writted, that javascript must says “” and not “”

  51. Shinox says:

    Sorry, javascript must says “data:label.name/” without spaces. Bye

  52. Max says:

    The last step code fixed now, please try to add it now. thanks for Shinox,
    And please Don’t add more comments for this tutorials, i will close comments here, this is because this widget have a lot of problems, and i’ll add another pagenavi widget very very soon witch wi’ll be free of errors. Wait for it.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here