Advanced Search Module

Close Search

Page Navigation Hack for Blogger

July 31, 2008Blogger Hack


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.


.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 {
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 {
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 {
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’/>

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;;;
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;
for(var c=0, post_category; post_category = post.category; c++) {
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = 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){


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;

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){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
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;;
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;;


html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
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&g

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;;
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

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

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;

html =&#39;&#39;;

blogPager.innerHTML = html;


&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=’’>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.

Related posts:

  1. Colorful Link Hover Hack for Blogger
  2. Related Posts Widget For Blogger with CSS
  3. Remove Navigation Bar in Blogger Blogs
  4. Navigation Menu or Drop Down Menu for Blogger
  5. Star Ratings Widget for Blogger

181 Responses to “Page Navigation Hack for Blogger”

  • rw August 3, 200812:05 am

    it works in my blog, thanks alot!

  • Mohamed Rias August 3, 20082:06 am

    Your are welcome RW ,I hope you know that this hack is present only in very few blogs. I am very happy to have your Blog in that List.

    You can expect more hacks like these here at Blogger Accessories.

  • Wolverine August 4, 20086:36 am

    dude i cant see this hack working on your page itself….its showing newer post home older post and noting after that… same thing is happening wid me…

  • Mohamed Rias August 4, 20087:53 am

    Hi Wolverine ,

    This Page Navigation hack works only in home page , Labels page and Archives page ( where we have more posts ) . Check it again , it should work fine.

    regards ,

    Blogger Accessories

  • Wolverine August 4, 20088:37 am

    yeah… its working now… great hack buddy…

    ill post a link on my blog…

  • Mohamed Rias August 4, 200812:12 pm

    Thanks Wolverine , you can expect more hacks like lytebox , dock menu , etc very soon

  • Amanda August 6, 20085:14 pm

    Hello Mohamed,

    I just wanted to say THANK YOU SO MUCH for posting this excellent hack!

    I have tried for months to achieve this without success, and am very happy to have found your tutorial. Just now I am customizing the appearance of this widget and will install in my main blog very soon.

    With your permission, I would like to write about this hack on Blogger Buster. Many of my readers have requested this hack, and I would love to pass on the information so that others can come to your site and learn how to add this to their blogs.

    Please let me know if you would be happy for me to link to this post (and also your widget based post) along with a description of how this works.

    Best wishes, and again many thanks for your hard work. I am genuinely impressed by your efforts :)

  • Mohamed Rias August 7, 20082:32 am

    Thanks Amanda , yesterday ( 06-07-2008 ) I tried to contact you in your site . Then I decided to customize the appearance of this hack and then I must contact you.

    I am giving you permission to add this hack to your site and you can distribute it to your readers too , but with a link to my blog.

    If you want any help contact me , I Will help you ,

    regards ,
    Blogger Accessories

  • Mohamed Rias August 7, 20082:47 am

    Amanda I forgot to tell you one thing , the script i posted here is already customized . If you want the full script with comments let me know . I will send it to you by email.


    Blogger Accessories

  • Amanda August 7, 20088:43 am

    Thank you Mohamed, this would be very helpful :)

    I managed to install successfully on my test blog, but had some problems when installing on my main blog which uses a custom domain. Eventually I did figure out the problem and now have this working properly on all pages.

    Would you be able to email me please? Then I can send you details of the revisions required to make this work for a custom domain blog, and other small changes which I made to ensure this runs more smoothly. I was unable to find any email contact details for you :)

    Thank you for allowing me to write about this. I would certainly include a link back here and also to your other post which explains the simpler method of adding as a widget beneath the Blog1 area (which may be much easier for those who are shy of customizing their actual template code!).

    I will write this up over the weekend and hope this will bring you much traffic as you surely deserve this for your efforts!

    Best wishes,


  • subagya August 9, 200812:07 am

    Thanks again rias your hack succesfull installed in my blog.
    Best Regards

  • Mohamed Rias August 9, 20081:30 am

    @ Subagya ,

    You are welcome dude . Very soon I am going to publish 3 Blogger Templates ripped from WordPress.

    regards ,
    Blogger Accessories

  • xphunt3r August 9, 20085:34 am

    You have nice blog and super hacks of blogger. I am exactly looking for this since I am blogging. I am happy to install successfully in my blog. I have a one problem on it. I set to 4 post each page. when I click one of label, except showing 4 post it shows all post. When I click on page number 2 then i got 4 post but that are of page number 1. I think better to check my blog. And I love nav image of your and I want to do it as yours.
    Anyway hope you will help me for this.
    Allah HAfiz

  • Mohamed Rias August 9, 20087:30 am

    walaikum Asalam xphunt3r ,

    When you visit Labels Page it will show all posts because you need to modify the Labels widget to show number of posts you want. In my Blog I have edited Labels widget to Show 2 posts per page. I will post this Hack soon in my Blog and If you want CSS for Navigation hack just like me then wait for sometime. Right Now I am modifying my script so I will post the Modified hack with CSS soon.

    Sorry for the inconvenience , I will post them soon

    Allah Hafiz

  • bloggErdal August 9, 20089:29 am

    i did it thank you very much.
    but it cant seem in homepage.
    how can i do?

  • PLAY WITH ORKUT,PC & MOBILES™ August 9, 20085:20 pm


  • subagya August 10, 20082:47 am

    Assalamualikum rias,

    I have got a trouble with page navigation hack, i use your template (JUMONG THREE COLUMN BLOGGER TEMPLATE), it seem don’t shown up in my main page, but if i click labels / categories that page navigation shown up. I look up your blog in main page and your page navigation shown up but in my blog not.
    May be you can help me?
    and i have try use your page navigation widget, but don’t work it in my blog?
    Sorry if my english bad, i hope u understand what im try to say.
    Best Regards

  • Mohamed Rias August 10, 20085:39 am

    @ Subagya

    I implemented this hack in my Jumong Template demo blog. I got no errors , did you made any modification to the Template. Or send me your Template , I will apply the hack and send it to you.

    email :

    regards ,
    Blogger Accessories

  • Mohamed Rias August 10, 20085:43 am

    Hi subagya , I hope you copied my CSS code for Page Navigation Hack. I use different script to suit that css code. Please replace your old script with my new script.

  • yresy August 10, 20086:50 am

    Assalamu Alaikum Mohamed,

    I tried your Navigation on my custom template but unfortunately it doesn’t work with both of your methods.

    Also, how do I get the orange navigation that you have?

  • Mohamed Rias August 10, 200812:22 pm

    Walaikum Asalam Yresy ,

    Please tell me what template you are using . Then I will be able to tell What changes you should do in the script. Or send me the template to , after implementing that hack I will send it to you

    regards ,
    Blogger Accessories

  • subagya August 11, 20083:28 am

    Assalamulaikum rias,

    Thanks very much for you attention , yes i modification your template ( i hope you dont be a mad), now the pagination hack work in my blog, because my mistake i did’t copied your css full code.
    And it use your page navigation orange i hope you aggred with it.
    Thanks again

  • subagya August 11, 20083:43 am

    And Rias , With your permission i would like to translate your hack to indonesian language, i hope you agree with it. im waiting for your permisision.

  • Mohamed Rias August 11, 20084:31 am

    Hi Subagya ,

    Yes you can translate this hack to your language.

    regards ,
    Mohamed Rias

  • NTT August 11, 20086:35 am

    Hi Mohamed !

    I sent to you my problem
    Please check mail and help me fix that problem
    Thank you !

  • Mohamed Rias August 11, 20087:34 am

    Hi NTT ,

    I received your email and I successfully installed related Posts widget ,page Navigation Widget and also ” Show author comments in different style” hack. But the page navigation widget I am having in my blog right now suits only White background. So I need to create images to suit your dark iphone template. So please be patient I will create and send. or Please use the default page navigation widget CSS style. After I create a different CSS style , you can implement that hack .

    regards ,

    Blogger Accessories

  • NTT August 11, 20081:14 pm

    Thanks Mohamed

    but can you fix below problem ?

    with :
    var pageCount = 2;
    var displayPageNum = 3;

    first pages :

    when I choose number page “3″ then :

    choose number page “4″ then :

    help me .thanks .

  • Mohamed Rias August 11, 20082:47 pm

    Hi NTT ,

    Thanks for bringing this error to my notification. Now i have updated my Script , so please replace the old script with the new script.

    Your Template is almost ready , But I am not able to find some Comment Code. If you want comments CSS of my style tell me , I will replace the Comment CSS and Div section to my template form.

    regards ,

    Blogger Accessories

  • firdaus.a August 11, 20086:17 pm

    beautiful.. thx… :)

  • subagya August 11, 20088:10 pm

    Assalamualaikum rias
    I have translate your page navigation hack in indonesian languange and i don't forget in my post to link your blog :) . I hope you can give me permission to translate your another hack :D . Thanks for you Extra Effort to publish blogger hack (its really great blogger hack!!). And can't wait to see :D > Keep Post Mohamed

  • Mohamed Rias August 12, 20082:44 am

    Hi subagya ,

    Thanks for translating this hack to your regional language. Please replace that script with the script in my post. Because that old script contains an error. NTT told me with images. So i edited the scripts and the script in my post is updated one.

    Blogger Accessories

  • NTT August 12, 20085:55 am


    You’re No.1
    your hack very cool

    But I have a suggest :

    1. “first page BUTTON” and “last page BUTTON”
    2. Overcome state “var displayPageNum” not exactly .
    for example :displayPageNum=3 then only 3 pages appear . at the moment not 3

    Sorry if my english bad

    thanks .

  • Mohamed Rias August 12, 20086:04 am

    Hi NTT ,

    Yes , you are right. I had those first page button and last page button in my unedited script. If you want that i can send you that to your email.

    Blogger Accessories

  • NTT August 12, 20086:16 am

    and this problem :

    if in a day I post many posts (ex. 50posts/a day) then have many button (number page)the same link
    the button :4,5,6 same link,
    result when click any numberpage in that string the same link then it's always go to last numberpage in that string the same link.
    in example above, when i click numberpage 4 then it's go to numberpage 6 .

    please fix this problem .thanks.

  • NTT August 12, 20086:49 am

    Yes, please send me that script

    thank you .

  • August 13, 20082:27 am

    Mohamed and Amanda, you are my idols.. :) )

    I’d like yr permission (I’ll also ask to Amanda ) to translate this for my readers in portuguese, of course linking you back.

    Tks very much!!

  • Mohamed Rias August 13, 20082:37 am

    Hi RO ,

    Yes you can translate this hack to Portuguese. If you need any help ask us.

    Blogger Accessories

  • Touriste August 13, 20085:42 am

    Would it be possible to show a specific number of pages without using the widget but by having modified the html code ?

    would it be possible to do for instance :

    Page 1 : 5 posts
    Page 2 : 3 posts
    Page 3 : 7 posts

    how would it run ?

    Thanks a lot (and sorry for my poor english level)

  • Mohamed Rias August 13, 20087:09 am

    hi Touriste ,

    Thanks for your suggestions .I will check whether I can do that. If I am able to succeed , then I will publish that new version of Page Navigation Hack soon.

    Blogger Accessories

  • Touriste August 13, 20084:08 pm

    I would add an other question for the futur “template” :

    Would it be possible to publish the posts without following a chronologic order and without changing the date of the post in the options ?

    To explain it in an other way : Would it be possible to choose the page of a post and the precise place on this same page ?

  • August 13, 20085:27 pm

    Hi Mohamed! Tks for yr comment at my page. I published again the script, this time in a attachment file once it’s easier for the readers to view it and copy it. Pls let me know if everything is okay now.

    Brazilian Ricardo Santos has noticed that some posts are missed or repeated in some pages. (pls see his comment in Blogger Buster). I’m experimenting this problem at my blog. Do you think it’s possible to fix this?

    Tks again the great hack.

  • subagya August 13, 20085:36 pm

    Yups, i have update you script in my post.
    Keep post bro..

  • ????? August 13, 200810:46 pm

    For some unknown reason it’s not shown in my blog! :(

  • yresy August 13, 200810:50 pm

    Assalamu Alaikum Mohammed,

    I e-mailed you in your Gmail about the Dark iPhone template for my website. Did you make the hacks for that? I think maybe you e-mailed but I accidentally deleted your e-mail. I emailed you on your Gmail. Please check! Thanks.

  • Mohamed Rias August 14, 20085:34 pm

    Hi Touriste ,

    We can have that CSS styling to this Page navigation Hack. I am working on this only. Within Next week I will post some best CSS codes for this Page Navigation hack. I also fixed some bugs . Will update the post next week.

    Blogger Accessories

  • wakyon August 15, 20083:02 am

    thanks man..u r the savior

  • NTT August 15, 20085:22 am

    Dear Mohamed Rias

    I waiting for you insert “back button”, “first button” and “last button” into above script .

    thanks .

  • ??????? August 15, 20081:17 pm

    Hi Mohamed !

    I sent to you my problem
    Please check mail and help me fix that problem if you can …. please
    Thank you !

  • Jose Balbino de Araujo August 15, 20089:03 pm

    It functioned perfectly. if possible disponibilize yours code with images. Greetings

    Balbino de Araujo

  • ioh August 18, 20087:15 pm

    Mohamed, i have one problem, i put this code in my blog, but, there are some post “lost”, i dont know why?, can you help me please?

  • Wolverine August 19, 20084:42 am

    hi buddy.. is this the updated hack or the same old hack..

  • Superb GURU BaniHassim August 20, 200812:43 am

    Thanks M.Rias..
    I found it really worked..
    Very useful…

  • PenCuri Kode August 22, 200810:48 am

    thanks yes good share

  • SJM August 26, 20088:54 pm

    CSS not Work, pagination OK


  • Mohamed Rias August 27, 20082:02 am

    Hi SJM ,

    Please tell me which template you are using . If possible send me ur template to my email i will add this Page navigation hack in your blog.

    Blogger Accessories

  • MKnight August 27, 20086:56 am

    I love this feature! However for Labels with spaces (%20) or non-English characters, I found the page numbers failing to show on Safari on Mac, allowing no access to articles on older pages of a Label.

  • SoulMate August 28, 20086:12 am

    Hi, can I send u my templete and u could add this page navigation in my blog ? I was trying to add but no changes, thought

  • Mohamed Rias August 29, 20082:04 am

    Hi Soulmate ,

    Yes send me your template to my email id.

    Blogger Accessories

  • PALS August 30, 20083:07 pm

    The code above was shown to me as & lt not "<". So copying the code above will result to no changes at all. Mohamed i hope you can solve this issue. Thanks.

    Charles of Money Making and Blogging Tips

  • Mohamed Rias August 31, 20082:05 am

    Hi Pals ,

    Please make sure you have done all correctly first. Because only few got errors in adding this hack. If you want i can add this hack for you . Send your template to my email.

    Blogger Accessories

  • Dewi Kharisma M. August 31, 20086:51 am


    difficult-nyaa… T.T

  • Mohamed Rias September 1, 200812:25 pm

    hi Dewi Kharisma M. ,

    i don’t understand what you mean ?

    If you have any problem adding this , please let me know (

  • John September 1, 200812:47 pm

    Hi Mohamed,
    I guess my site belonged to the 0.001 cases that did not work. But with your persistent offline support you made it work! Thanks a lot and if there is any way I can return the favor please let me know!

    John Evers

  • kabe243 September 1, 200811:26 pm

    hi mohamed,
    i have a blog that is hosted on my own server with a custom template. any idea if it is possible to make a pagination for it like you did here?
    thanks – kabe

  • Mohamed Rias September 2, 20082:00 am

    Hi Kabe243 ,

    For those who use custom domain we need to change the script.
    find this line in the script :

    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;;;

    replace the above line with the following line

    var isFirstPage = thisUrl.substring(thisUrl.length-10,thisUrl.length)==&quot;.com/blog/&quot;;

    Now everything must be fine.

    If you still have problem , please send your template to my email id . I will add this hack and then i will send you back.

    Blogger accessories

  • Technoraz September 4, 20089:29 am

    Hi Mohamed I have a problem on displaying the page navigation hack on my blog….

    Can you make it for Me?
    I’ll will sent you my template to your email!

  • Kashif September 6, 20088:31 am

    Salam Mohamed Rias !

    I have successfully installed this hack and it looks good . One thing I would like to ask is that on every page , right below the page navigation buttons there is text which says “Subscribe to: Post Comments (Atom)” . How to get rid of this text / link ? as it is making the buttons look odd .

  • iEn September 7, 20083:47 pm

    i did it.. but doesnt appear anything :(

  • Mr. Sim September 10, 20086:13 am

    good, I could do it now but I still have doubt how to put more pages… it is just shown only three pages in my blog…

  • Lara September 11, 20088:35 pm

    I Have problem with more than 500 posts on my blog :(

    My Blog: 627 posts, and I set var pageCount = 5; ( 5 posts displayed on each page ) , But It show only 100 pages(=500post)…

    there is this problem? –>

    Please help me…

  • sharksuke September 14, 20084:31 pm

    it not work in my blog..
    i already set pagecount=2.
    its mean my 1page show 2 post.
    but it show all post.
    but when i open pages 2 it can show 2 post
    how my 1 page show all post?
    did i miss something

  • Mohamed Rias September 15, 20084:53 pm

    Hi sharksuke ,

    Welcome to Blogger Accessories. Please go to settings section of your blog. Then navigate to ” Formatting “. There please change the number of posts to be shown on home page = Page count.

    if still the problem persists , then please mail me

    Blogger Accessories

  • Mohamed Rias September 15, 20085:05 pm

    Walaikum Salam Kashif ,

    Go to Layout section of your Blog , then navigate to EDIT html subtab. put a check in Expand widgets box. Then search this text

    <b:include name='feedLinks'/>

    remove that line.

    Hereafter subscribe to posts link won't appear.

    Blogger Accessories

  • Mohamed Rias September 15, 20085:07 pm

    @ Mr.Sim ,

    Please change the number (2) to your wish in your Blog.

    var pageCount = 2;

    Blogger Accessories

  • Mohamed Rias September 15, 20085:13 pm

    Salam Alaikum iEn ,

    You are using custom domain

    To implement this hack in your blog , you need to make some modifications.

    in the script search this line

    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;;;

    Change it to

    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

    that's it now the Page Navigation Hack will appear in your Blog.

    Please change the css code to suit your template.

    Blogger Accessories

  • Tom September 19, 20089:32 am

    Hi Mohamed,

    I installed your Hack on my Blog and I always miss my 2nd page!

    That means if I click on page 2, it shows page 2 but the post is from page 3 and so on. So I always miss 1 post.
    Page 1 shows “Kroatien”, page 2 shows “Milano”, but I miss the post “Wir sind jetzt…” which is between these 2 posts.

    Plz help! Thx!!

  • p@r@noid September 19, 200810:08 pm

    nice i will wait for widget

  • Mohamed Rias September 21, 20087:26 am

    Hi Paranoid ,

    I already posted a article on this ” Adding Page navigation hack like a widget”

    check here

    Blogger Accessories

  • technoplex September 24, 200811:02 pm

    hello …I successfully installed in my blog…
    but the problem is that all the page numbers don’t have space..they are so closed.

    help me in this regard…

  • Anujj October 4, 200811:20 am

    cant install this on web 2.0 template

    see my blog download movies games for free

  • Softpump October 4, 20081:57 pm

    dear mohammad
    in my blog the pagination doesnt work properly
    plz chk it out ………my blog
    when i press on page 2 it goes to some other page like 21 in mine…..
    plz i liked ya hack and thus applied it but plz fix it nwo as it is not working properly
    thanks in advance…………..

  • Admin October 5, 200812:21 pm

    Hi dude,

    I got installed the code in the blog template….able to see the page numbers. However, when i select the categories, i am not able to see the page navigation and also only 20 posts though i got more….cud plz chk.????

  • Sharad Poddar October 5, 20082:10 pm

    Excellent Widget
    I just implemented it on my blog:

    Ebooks Catalog

  • chris October 5, 20086:26 pm

    Hello my friend i just installed this in my blog but i have problems in my categories.for example in one category i have made 24 post ,i see 20 and all is in the first page the other 3 pages has the same posts,thanks in advance

  • Art Imagination Theme Blogger Templates October 6, 20087:52 am

    Thank you so much.

    for Share. and we have : Blogger Templates Designs too.

  • dcloud October 8, 20087:03 pm

    Installed this on my blog but the numbered page links do not appear on the main page – only on the older pages.

  • Abhishek October 10, 20086:57 am

    Hi Rias,, I installed the codes.. but then also.. I am nt able to see the navigation widget…

  • Anujj October 11, 20084:55 am

    seee mine

  • ???????? October 12, 20085:36 am

    hello! how can i put picture avatar like your blog!

  • tarun October 12, 20081:04 pm

    heeeeeeeeeeeey, iam very happy, its working in my blog thanq for help…

    this is my blog

  • fungags October 14, 20083:12 pm

    thanks its not working for me

  • Debajyoti Das October 15, 20088:14 am

    Hello, This is a Really Nice Hack..

    How Have You Highlighted The Author Comments ??..

    And the Follow Up Comments

  • Gauntles October 16, 20082:46 am

    Hey mohamed,I am freaking out with this code,can’t get it to work,it just doesn’t appear.Please send me an e-mail in order to get this to work.Pleaaaaaaaasse!!!!

    THX a lot!!!!!!!!

  • LilMissUrban October 19, 20083:25 pm

    Does this work in Classic blogger??

  • heartnn October 20, 20085:13 am

    Dear Mohamed Rias

    My blog has a custom domain,how can I use this hack

  • RiddleR October 20, 20084:46 pm

    Dear Mohamed,
    can i ask for some help on how to do this hack for old blogger with such variables:
    <$BlogItemNumber$>, <$BlogItemUrl$>, … etc
    not the new blogger codes.

  • mackenzy October 24, 20088:56 am

    hi mohamed -
    this hack is awesome. it works for most of my templates, but for some reason, will NOT work on 3 column templates that I am trying to use.

    do you think that the hack just isnt compatible with some of the templates?

    do you think I have too many widgets/styles?

    I cant figure it out, and I think I am doing it right.

    Any help is appreciated.

  • October 27, 20087:01 pm

    Hi mackenzy,

    I think this hack does not show on your blog because you use a modified template.

    This hack use a div name “blog-pager” to put the page numbers inside that div tag.

    As I viewed your page source, I didn’t see any such div tag. It might be have been removed or changed from your template.

    Please visit my blog, I have a new post mentioning this problem.

  • shima-pon October 29, 20085:28 am

    Hi Mohamed,

    Thanks for this hack, it’s very useful! But, I found that this doesn’t work around when in search results page. Instead of the numbers, the normal next/prev links appear. Can you do some fix on the hack or at least provide an additional code on the javascript to make it work around on the search results page? By the way, great blog you have ^^

  • Cyber Criminal October 29, 20086:23 am

    Hi Mohammed,

    I am unable to use this trick in my Blog

    can you please fix this ?
    waiting for Your reply!!!

  • Otavio Neto October 30, 20088:21 pm

    Have u ever realized that it seens to have a smal count error? When o move from de inciatial page, to the second, it miss a post (the first in the second page)

    by the way! Why dont u use this hack in your (this) blog?? :D

    even so … thz for the great jog …

  • WiebX November 2, 20087:13 am


    Day-1 = 10 post
    Day-2 = 20 post

    var pageCount = 5;

    When we click on Page 2, it should be shows post #6 from Day-1.

    But when we click on Page 2, this Nav Hack will shows post #1 from Day-2.

    The post #6 through post 10 from Day-1 will dissapear and never shows.

    Please fix the bug.

  • WiebX November 2, 20087:29 am


    Day-1 = 10 post
    Day-2 = 8 post
    Day-3 = 10 post

    var pageCount = 5;

    This Nav Hack will make post#6 – post#10 on Day-1, post#6 – post#8 on Day-2, and post#6 through post#10 on Day-3 will dissapear and never shows.

    Because when we click on Page 2 with this Nav Hack, it will shows post #1 on Day-2 (where it should be shows post#6 – post#10 on Day-1).

    And when we click on Page 3 with this Nav Hack, it will only shows post#1 – post#5 on Day-3.

    The BUG is on:

    Please fix the bug.

  • krkeans2001 November 3, 200812:08 pm

    Wow! A lot of thanks to you Sir! This hack works in my blogsite… I hope you keep posting valuable post like this….

  • Drajat Ahmad G November 5, 20085:19 am

    my blog template use a blogger classic template, hot to work ???

  • Rajesh N Butpur November 12, 20082:01 pm

    nice hack

  • samirt November 14, 20082:35 pm

    hi mohamed .. so pleased to use your great hacks !
    this hack work fine for me
    but i need to remove this (Page 1 of 2: )like you did and keep viewing just pages numbers and navigation butons .. have you any idea ?

  • Mighty November 16, 20082:29 pm

    i need help it does not work on 3 columns on my blog i tested out for other blog it works, does this hack not work on 3 column blog?

  • ROHIT SHUKLA November 28, 200812:31 pm

    i am using a true eligance template by In template the page navigation hack is installed but there is some problem in this. I have 10 posts in my blog and i show 7 posts on each page. The problem is that when i click on page 2 it show the 10th number post. It doesn’t the show the post number 8 and 9. Please solve the problem….

  • Toy November 29, 20085:51 pm

    I was trying to use this pagination. But some error show:

    Element type "htmlMap.length" must be followed by either attribute specifications, ">" or "/>".

    What is the problem?

  • Andy Nguyen's World December 11, 20087:12 pm

    Unfortunately, it doesnt working in my blog!!!I ve been trying many ways to do, but nothing can help me!!!:(((

  • BlueMazic December 12, 20087:09 pm

    Hi Mohammed! Thx for yr xtra ordinary blog hack..its works on ma blog…but i wana put this navigation bar at the bottom of ma site…can yo plz tell me how can i put it at the bottom(now its on the top) of ma site?

    Thx a lot.

  • shiro December 13, 200810:17 pm

    Hi Mohamed,

    Can you share the code that you are using, including those image to me.

    Please send it to


  • Calipso December 19, 200811:07 am

    Salam Rias,

    Mohon izin nak masukkan hack ni dalam blog aku (alih bahasa ke bahasa melayu)

    Ada masalah sikit dengan feeder punya link dalam blog aku.

    Terima kasih banyak.

  • Dr. Internet December 19, 20082:49 pm

    It doesn’t work at all with my blog, sad.


  • DirtDigger (Tessa) December 20, 20083:51 am

    It doesn’t work for me either- I’ve tried yours and the one on Blog Buster. Nothing shows except what was there in the first place, i.e. older, newer, etc. Thanks anyway.

  • Jason Law December 25, 20082:52 am

    It is working well for me! Thanks for sharing !
    Btw,is there any choices of the style?

  • Avinash December 26, 20089:10 am

    I tried both of ur methods.This widget tpye and the other one direct by editing blogger template.I did everything the way u said but still its not working.I dont know what the problem is.Any help would be appreciated.

  • chingy December 27, 200810:48 am

    Hey, how do I insert this with Blogger Classic Template?

  • nik December 31, 20087:44 pm

    not function for me 2

  • nik January 1, 20093:18 am

    still not function for me

  • shiro January 1, 20095:22 am

    now, it does not even work with custom domain .com

  • bilecem January 2, 20095:36 am

    Greate!. it works at me. But i am worried about the ping result of my blog.Because after adding these long codes ,my blog started to open slower.May it is not too required. Yes ping respond is not good after this.

  • internet marketing newbie January 5, 200911:03 pm

    i do never use css like that it still confusing for me..:)peace bro

  • January 7, 20091:42 pm

    I can’t find the “b:section class=’main’ id=’main’ showaddelement=’yes’” in the blog that I want this in, it’s weird because my other blogs has this line… could anyone help me out? here’s the blog i want this in but unfortunately have trouble installing it on.

  • Angie? January 14, 20097:28 pm

    I deleted the last reply, because the problem got solved. :-) )
    Great stuff, thank you, rias.

  • Shafar January 21, 20094:36 pm

    Great Tips..


  • Angie? January 21, 20098:40 pm

    Hi Rias,

    When I clicked the 2nd page, the showed posts don’t seem right to me, some posts are just not there….I have 3 posts per page, and on the 2nd page, I would expect the 4th at the beginning, but somehow it’s not there….please help!
    Thank you!

  • January 22, 200912:24 pm

    Not able to get it working on my site.

  • Didiet January 22, 20093:42 pm

    how do u do?

    Why this trick can’t work with my template?

  • David Aragon January 24, 20096:30 am

    Mohamed, thank you very much for the beautiful work. I have implemeted it in one of my blogs:

    Hope you don’t mind, but I used your CSS style and images on it too.

    Best regards from Brazil!

  • Softpump January 25, 20094:51 am

    plz chk ….i have many b section plz tell me where to paste the second code……


  • dlcomplete January 28, 20098:19 am

    It’s not showing any navigation on my main page please help.

  • kOtik January 29, 20092:13 am

    Hi there.

    I don’t know if you really read your comments and I also don’t know if anyone has pointed this out already.

    I think I know the reason why people have problems with this hack. It might not work for some people (as it didn’t for me) mainly because of the timestamp on the page links.

    As you probably know all the blogger posts have a time and date. With this hack you just ignore the time of the last post on the page and use only the date for sorting thins out. What happens is that if people post more than once a day, some posts might get lost in that process.

    My suggestion (at least it worked for me) is changing the “timestamp” variable to use more than only 10 characters of the “post.published.$t” string.

    In my case I had to use : var timestamp = post.published.$t.substr(0,19) + ‘Z’;

    I think it depends on what you have in your blog settings, though.

    Hope I could be of assistance to someone!

  • SostyPasha January 29, 20094:13 pm

    incredible awesome script !!
    thanx so much Mohamed :)

    wish Success for you brother :)

  • vonbix January 30, 20093:50 pm

    Hmm… It works, but it does’nt lokk anything like the image above. ???

  • Brainiac February 2, 20092:29 pm

    Hello is possible modify this hack for work with this new system pagination?

  • Sudeep Acharya February 9, 20097:26 pm

    Hey i m trying but not being for more than 3 times please help me

  • prince February 11, 20096:49 pm

    mohamed man plz help me i have a blog but dis trick doent worked on it plzz contact me at plz plz plz i need ur help thnx in advance

  • HACKERZ February 12, 200911:12 am

    muhmmad please contact with me ill send you my template i try it lot of time but cant get sucess

    please can you help me :( :( :(

  • amIrah sYahirah February 13, 200912:18 pm

    hey muhammad, i need help too. it doesn’t work on mine. if u not busy, please contact me. i send u the template

  • MoReTelugu February 14, 20098:02 am

    Hai Brother iam very sad today because iam didnt know what can i do. for the blogger template iam running the blog named ihave changed my blogger template then i wanna tried to change another template it cames as header1 cannot remove ihave tried more times on more systems but no result so ihave desided to classic how can i change another template to my blogger please help me.iwill very thankful to you.

  • xraycheat February 16, 200911:13 pm

    Hi Mohamed,

    First, congratulations for your stuff, realy useful.

    Second, i’m trying to implement the pagination on my blog, but, it don’t work. The current version of navbar’s js code don’t appear on the screen, but the older versions were appearing and were not working well, they were working in first page, maybe in second page, but in the rest, nothing =/

    Can you help me please? I send you my template if you have some time


  • james March 2, 20091:00 am

    Not really working well the numbers get messed up
    and i really mad i waster hours on changing code still nothing -.- please HELPPPP!!!

  • Anwar March 2, 20098:41 am

    I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.


  • default19in March 2, 20095:34 pm

    I was desperately looking for this.
    Thanks a lot to u your blog & original.
    Just go through my blog then you'll come to know why I was looking for this & how much important is this for my blog.
    my blog is

  • Gamer007 March 4, 20096:13 pm

    hi need little help

    works kool

    but can u

    amend litle code for me

    I want to remove tag “Previous” in navigation bar


    Page 18 of 126: First Previous 16 17 18 19 20 Next Last

    Mail at

    thanks in advance..

  • By H@risP@p March 4, 200910:59 pm

    Please fix it… It doesn’t work!!!! It’s doesn’t show anything!

  • Ammy March 5, 20094:14 am

    when you will post this script bugs free.. it has lot of bug it skips post and it looks ugly..your look beautiful why dont you share that with us are u afraid..dont mind plz..

  • Adult SMS March 19, 200911:52 pm

    its Not Working ……………

  • Chrishiella March 21, 20097: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 …

  • Doctor March 25, 20091:41 pm

    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 .

  • Lizeth March 28, 200911:32 am

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

  • Robot Nine March 28, 20096:01 pm

    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

  • Robot Nine March 28, 20097: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.

  • 2filmiee March 30, 20094:52 pm

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

    thanks in advance

  • Hunain Raza April 4, 20099:00 am

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

  • ThePharma-Shopist April 11, 20092:51 pm

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

  • Nirvan April 14, 20092:45 pm

    Hello Riaz, I have a blog which has over 200 pages ( 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 ….

  • helot April 14, 20099: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.

  • Deeba @Passionate About Baking April 15, 200911: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.

  • Brian April 20, 20092:49 pm

    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.



  • blogger April 22, 20093:47 am

    mine is classic template can u send me the code to use in classic template of blogger. please my mail is

  • Mohamed Rias April 28, 20092:23 pm

    @Debajyoti Das

    I will write about that soon frnd

  • Khayla May 4, 20095:50 am

    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

  • Deksearch May 7, 20094:01 am

    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

  • Oases May 13, 20095:40 pm

    there are many useful hack! thank you

  • Mohamed Rias May 14, 20091:10 am

    @ Oases

    Welcome to Techie Blogger. You are welcome frnd..

    will post more hacks like this soon..

    Mohamed Rias

  • ninja May 15, 20097: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]

  • NiftySensex May 16, 200912:34 pm

    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'/}

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

  • W3 Inspiration May 19, 20098:16 am

    hey rias your works are marvellous

  • milan18 May 22, 20097:14 pm

    the script doesnt work

  • DownSoft24h May 23, 20091:03 am

    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.

  • winlin May 26, 20096:42 am

    Salamu alaykum brother.

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

    I really need it in my blog ”

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

    how can i add this code to my blog ?

    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

  • June 2, 20098:19 am

    Really helpful post .
    thank you !

  • Rajesh Kumar.Chekuri June 4, 20099: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 …..

    Thanks in ADV

  • Filthyfun June 12, 200912:22 am

    Is it possible to change the word "Pages"?

  • Venkat June 16, 20096:04 am

    hi i have check but its not working on my blod i have added the script through html also but i has not shown ?

  • CMDAHAL August 17, 20097:14 pm

    Deat sir.
    its not working in my blogs. please can u tell de detail about where i have paste coz.while i was pasteing code and saving its cant save. please sir send me mail

  • Abhishek June 15, 201112:08 pm

    this is not in my blog’s HTML , even ” ” , what do i do ?? I got 5 searches with , what do i do! , please do suggest me as soon as possible!


181 Responses to "Page Navigation Hack for Blogger"