Page Navigation Hack for Blogger

Most said page navigation menu in the bottom of the page can appear only in WordPress blogs. But Now here is a blogger hack which will help you to show Page Navigation Menu in bottom of the page ( see screenshot ) . you can Add this Page Navigation hack to your blogger template either by inserting script to your template by editing or you can add it as a widget . In this post I will write only how to add this Page navigation menu by editing template code.

Page Navigation Hack

I have used a background image for this Page Navigation hack. If you want to show this without the background image just remove the background image url .

Let us start :

Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.

Step 2 : search this line ]]></b:skin> and add this CSS code above that line.


CSS CODE WITH IMAGE :

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

It must look like this :

 When you Add CSS code to your template , it must look like this

Step 3 : Now search for this code or related in your template ( no need to expand widgets )

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

Now Add This script just below the </b:section> .

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&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= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

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!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category; 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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+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){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

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

&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

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

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

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

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

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

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

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<div style=’text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;’> <a href=’http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html’>Grab this Widget ~ Techie Blogger</a></div>

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my blog I have put that value as 2 . In each page you can see only 2 posts .

2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.

For example :

In my blog I have chosen 3 , then 3 pages will be shown.

That’s it now we have added Page Navigation menu hack to our blog successfully .

That CSS code will suit almost all templates. Please don’t remove the credit link.

I hope all of you will like this Page Navigation blogger hack . If you have any doubts please ask in comment section . Comments are most welcome , please give me your feedback about this blogger Hack.

You can also add this Page navigation hack in the another method : Widget style.




If you like this article , then please help us by bookmarking

230 Responses to “Page Navigation Hack for Blogger”

  1. its Not Working ……………

  2. mmm..nice nifo…but if i post more than 7 in a day and i click page 2 icon,it will go to page 3 …

  3. assalamo alaykom mohamed

    jazak allah khayran

    thanx alot for the update and for the nice hack but unfortunately it doesn’t work correclty ,there are alot of bugs.
    for example there many posts in my blog that are not shown and in the labels page there are many duplicates.

    please if you can fix this we will be so grateful .

  4. huhuhuhuhu. its not working! but i love to have like this. please help me!

  5. Hmmm, cool idea but every time I try it when I set it up to show 3 possible page number choices it shows 4, if I selst 4, it offers 5. Then page one, home page is fine, but when I select to go to page two it skips several posts. Page 2 shows the posts that should be on page 4-5. Any ideas? Alan

  6. Mohamed. Sad, it is a good code except obviously has bugs and skips many posts for most users. I will have to trmove it now, it seems you are failing to answer posts on this venue. Bummer.

  7. hello mohamed i tried putting this scipt in my blog but not working can u help me??

    thanks in advance

  8. Step 3
    Did not find in html coding. Please Advice Me how to fine it.

  9. hay mohamed…salamo 3aleko
    thats amazing hack but in my blog does not work ..i don’t know why..so plz give me some more info about that hack

  10. Hello Riaz, I have a blog which has over 200 pages (http://knight-nirvan.blogspot.com) but the code you provided only provide 63 pages,that is on my blog, it says ” Page 1 of 63 “, I want to increase the amount of number pages… that is ” 63 ” not the number of post to be published on one page.Can you help me??

    Your Help will be most appreciated.

    Please reply me ….

  11. Is there a way to reverse the order of the pages? What I mean is, I would like my first ever post to be on page 1 as opposed to the newest post being on page 1.

  12. Deeba @Passionate About Baking 15. Apr, 2009 at 4:09 am

    Hi there. You are doing a lot of great stuff here. I am still trying to figure out a lot of widgets for my blog, including a label cloud widget for blogger. Is it possible, & is it simple to install. Thanks a lot for your time.

  13. Hi Mohamed, I tried your hack using the HTML editor and it doesn’t seem to be working. I am quite keen to get a navigation option and would appreciate any help you can provide.

    Thanks

    Brian

  14. mine is classic template can u send me the code to use in classic template of blogger. please my mail is aaboobacker@ctjv.com

  15. @Debajyoti Das

    I will write about that soon frnd

  16. Hi, can u help me with this hack pls..?
    I’ve install everything (follow from blogger buster and compare it with yours) but nothing changed.
    Thank bfore

  17. I tried your Navigation on my custom template but unfortunately it doesn’t work with both of your methods.
    Sorry if my english bad, i hope u understand what im try to say.
    And Send E-mail hack
    Thanks

  18. there are many useful hack! thank you

  19. @ Oases

    Welcome to Techie Blogger. You are welcome frnd..

    will post more hacks like this soon..

    regards,
    Mohamed Rias

  20. this script only works if the blog have a few posts per day.
    Probably, the problem is in "T00%3A00%3A00%2B08%3A00" at /search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount

    and <script type="text/javascript"> don't works yet. the correct: .<.script type='text/javascript'.>. [remove dots]

  21. Dear Rias,
    I'm unable to find the code given at step2 in my blog.

    Instead I have this code
    {I made some modifications by removing < hope u wil understand the code}{ showaddelement='no'>
    b:widget id='HTML7' locked='false' title='Page Navigation' type='HTML'/}
    /b:section}

    Now please tell wat shud i do to get it done?
    Thanx.

  22. hey rias your works are marvellous
    http://digitalcurves.blogspot.com/

  23. the script doesnt work

  24. My blog has lost older post, home and newer post that I never touch them. Help me! Page navigation not work with all blog of mine.

  25. Salamu alaykum brother.

    baraka alah feek akhi, for the “Page Navigation”
    you made .

    I really need it in my blog ” http://al3arabiya.blogspot.com

    because i have too many postsand the “older post ” button is too small

    how can i add this code to my blog ?

    http://1.bp.blogspot.com/_xn2gmPb9TfM/SKH-nxZqqUI/AAAAAAAACFE/ST-hC4HWp2w/s320-R/page-navigation.jpg

    plz help

    if there is no chance , plz tell me what is the template could be work with that “page navigation”

    baraka alah fik akhi wa jazak allah khayr
    .

  26. Really helpful post .
    thank you !

  27. great widget ……….
    but it couldn’t working fine….
    i installed this widget i think u r the real hacker of the code i found it on some other blogs those just modified css of this…
    i like the above navigation style that’s why i use it….

    ” the problem is when i navigate to next or 2 page it navigates some far and it displays only some posts only ”

    just check the below blog and use navigation to understand …..

    http://funevil.blogspot.com/search/label/Animal%20Pics?max-results=5

    Thanks in ADV
    From http://funevil.blogspot.com/

  28. Is it possible to change the word "Pages"?

  29. Open quote is expected for attribute “{1}” associated with an element type “class”.

    i am getting this error
    explain it

  30. dear friend this trick is not workink in my website

  31. I just don’t understand.Can u help me?

  32. Your Step by Step Method in Explaining such stuff like this is just Simply the best of the Best!

    from 5 Websites that I’ve Visited So Far!

    Thank you & bPeace be With u!

    Best Regards!

    Diaz Ikh’san

  33. hi i just used your hack in my new blog http://littlesmsfun.blogspot.com really love it..
    I was thinking to change the background image of each page number instead of background color is it possible ?

    If yes please reply to my id

    itsmeeirsh@gmail.com

    can also see my blog

    Thanks in advance

  34. I have followed what you said above in my blog. But i can’t find anything ….

    plz check my blog and solve this problem..

  35. it not working here it give the error that my XML, HTML elements are not properly closed mu blog here
    I am also missing older post links on my page

  36. Hi,
    I’m tired looking for some codes and tricks about how to make a default page on Blogger. So there’s not always a newest post that will be displayed first.
    Can you help me please?

  37. Still waiting for response on my comment @ Admin

  38. NIce article. Really nice! But i think that you could give some more info on a couple of points. However, keep on developing your.

  39. […] I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page […]

  40. Wht these error means plz guide me.

    (Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.)

  41. I Tried both the way by widget and by editing template.
    but none working..
    i use revolution church template..


  42. tutorialnya mantap banget agan.. ^_^

  43. […] Page Navigation Hack for Blogger […]

  44. its not working

  45. […] on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a […]

  46. Hi There !

    I have updated the code. Please get the new code here

    Page Navigation hack – Bugs Fixed

    regards,
    Mohamed Rias

  47. […] Page Navigation Hack for Blogger – Blogger template customization Method […]

  48. […] type="text/javascript"></script> Grab this Widget ~ Blogger Accessories [/cc] In the code above you can edit the lines in red to your wish . 1 : var pageCount = 5; The […]

  49. 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…

Leave a Reply

You must be logged in to post a comment.