Page Navigation Hack for Blogger

31. Jul, 2008 230 Comments

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

   

- has written 99 posts on Techie Blogger


Visit Authors Website  |  All Articles From This Author
0
hits

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

230 Responses to “Page Navigation Hack for Blogger”

  1. Adult SMS 19. Mar, 2009 at 4:52 pm

    its Not Working ……………

  2. Chrishiella 21. Mar, 2009 at 12:44 am

    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. Doctor 25. Mar, 2009 at 6:41 am

    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. Lizeth 28. Mar, 2009 at 4:32 am

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

  5. Robot Nine 28. Mar, 2009 at 11:01 am

    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. Robot Nine 28. Mar, 2009 at 12:18 pm

    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. 2filmiee 30. Mar, 2009 at 9:52 am

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

    thanks in advance

  8. Hunain Raza 04. Apr, 2009 at 2:00 am

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

  9. ThePharma-Shopist 11. Apr, 2009 at 7:51 am

    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. Nirvan 14. Apr, 2009 at 7:45 am

    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. helot 14. Apr, 2009 at 2:13 pm

    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. Brian 20. Apr, 2009 at 7:49 am

    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. blogger 21. Apr, 2009 at 8:47 pm

    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. Mohamed Rias 28. Apr, 2009 at 7:23 am

    @Debajyoti Das

    I will write about that soon frnd

  16. Khayla 03. May, 2009 at 10:50 pm

    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. Deksearch 06. May, 2009 at 9:01 pm

    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. Oases 13. May, 2009 at 10:40 am

    there are many useful hack! thank you

  19. Mohamed Rias 13. May, 2009 at 6:10 pm

    @ Oases

    Welcome to Techie Blogger. You are welcome frnd..

    will post more hacks like this soon..

    regards,
    Mohamed Rias

  20. ninja 15. May, 2009 at 12:29 pm

    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. NiftySensex 16. May, 2009 at 5:34 am

    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. W3 Inspiration 19. May, 2009 at 1:16 am

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

  23. milan18 22. May, 2009 at 12:14 pm

    the script doesnt work

  24. DownSoft24h 22. May, 2009 at 6:03 pm

    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. winlin 25. May, 2009 at 11:42 pm

    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. widgetblogger.co.cc 02. Jun, 2009 at 1:19 am

    Really helpful post .
    thank you !

  27. Rajesh Kumar.Chekuri 04. Jun, 2009 at 2:27 am

    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. Filthyfun 11. Jun, 2009 at 5:22 pm

    Is it possible to change the word "Pages"?

  29. ajblade 18. Jun, 2009 at 6:29 am

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

    i am getting this error
    explain it

  30. tanuj 19. Jun, 2009 at 10:28 pm

    dear friend this trick is not workink in my website

  31. Irfan 28. Jun, 2009 at 6:59 am

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

  32. Diaz 01. Jul, 2009 at 5:08 am

    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. IsHu 07. Jul, 2009 at 12:22 am

    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. Sudeep Acharya 07. Jul, 2009 at 9:59 am

    Thanks it works on me.

  35. krishnamraju 10. Jul, 2009 at 12:05 am

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

    plz check my blog and solve this problem..

  36. Munir 11. Jul, 2009 at 1:01 am

    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

  37. fateemafa 11. Jul, 2009 at 11:12 am

    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?

  38. IsHu 17. Jul, 2009 at 1:38 am

    Still waiting for response on my comment @ Admin

  39. Jim-Jimm 19. Jul, 2009 at 8:40 pm

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

  40. Page Navigation javascript for blogger users @ Techie Blogger

    [...] 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 [...]

  41. Apurv 29. Aug, 2009 at 8:43 pm

    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”.)

  42. PLaYeR 06. Sep, 2009 at 10:27 am

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

  43. f.uf.u 12. Sep, 2009 at 9:12 pm


    tutorialnya mantap banget agan.. ^_^

  44. Page Navigation for Blogger (Problems Solved) | Abu Farhan

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

  45. bhagirath 17. Sep, 2009 at 5:38 pm

    its not working

  46. Blogger Pager Script – Page Navigation For Blogspot » Themespedia Blog - Your Source of Web Design

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

  47. Mohamed Rias 03. Oct, 2009 at 7:20 pm

    Hi There !

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

    Page Navigation hack – Bugs Fixed

    regards,
    Mohamed Rias

  48. Page Navigation Script for Blogger - bugs fixed @ Techie Blogger

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

  49. Page Navigation Hack for Blogger | Worthy Tips

    [...] 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 [...]

  50. IsHu 23. Oct, 2009 at 2:11 am

    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…

« Older Comments
Newer Comments »

Leave a Reply

You must be logged in to post a comment.

Blogger Hack