Advanced Search Module

Close Search
 

Page Navigation Menu Widget for Blogger

Yesterday 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 Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing Blogger Template.

Let us see how to add this Page Navigation Menu Widget :

Page Navigation Menu Widget

step 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Page Element link there.

Step 2 : In that Page Element window , choose HTML / JAVASCRIPT .

Step 3 : Now add this Javascript in that window.


<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom: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;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

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!=''){
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] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
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+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

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

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

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

if(postNum <= 2){
html ='';
}

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

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

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

}
</script>

<script src="/feeds/posts/summary?alt=j so n-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://bloggerdummies.com/blogger-page-navigation-widget">Grab this Widget ~ Blogger Dummies</a></div>

After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot

Page Navigation Menu Widget

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.

Now save your template .
That’s it now we have added Page Navigation menu widget to our blog successfully .

I hope you guys will feel this method is easier than the last one.

Related posts:

  1. Page Navigation Hack for Blogger
  2. Related Posts Widget For Blogger with CSS
  3. Star Ratings Widget for Blogger
  4. Navigation Menu or Drop Down Menu for Blogger
  5. Social Bookmarking widget for blogger
 
 

185 Responses to “Page Navigation Menu Widget for Blogger”

  • syafira August 9, 200810:33 am

    luv this trick :) and the screen shot too :)

  • Mohamed Rias August 9, 200812:40 pm

    Welcome to Blogger Accessories Syafira !

    Thanks for your applauds .

  • deepstructure August 13, 200812:46 am

    for some reason i don’t have the “add a page element” link. all my page element add buttons say “add a gadget,” which only allows me to add blogger gadgets or a custom url to point to one. have i done something different to my template or has blogger changed something?

  • deepstructure August 13, 200812:52 am

    nevermind – i figured it out. there’s a “configure html/javascript” widget. disregard! :)

    btw, one feature i love about commenting on other blogspot blogs is the “check here to have follow up comments emailed to you.” i see you have a blogspot blog but don’t have that feature enabled. or do you have it done automatically?

    btw2, found your site via blogger buster

  • livreafluencia August 13, 20082:52 pm

    Great!!!

    I’m an Brazilian from Uberlândia-MG.
    I am knowing your blog through Blogger Buster.
    Really very good …
    (Sorry for English, I am a beginner)

  • Mohamed Rias August 13, 20083:02 pm

    hi livreafluencia ,

    Thanks for your comments.

    regards,
    Blogger Accessories

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

    It’s not working for me. I get the whole script shown in my page! :(
    -
    Rashed

  • yresy August 13, 200810:48 pm

    Assalamu Alaikum Mohamed,

    Did you get my dark iphone template e-mail?

  • ??????? August 13, 200811:49 pm

    I get the whole script shown in my page!

  • Bengt August 14, 200812:58 am

    Yeah! The whole script shows in my page too! Assistance please..

  • Mohamed Rias August 14, 20086:22 am

    Sorry for the trouble guys. Now I have updated the script. So please add the script again.

    regards,
    Blogger Accessories

  • ????? August 14, 20088:34 am

    Ya, its working now. Thanks. :)

  • ??????? August 14, 20088:13 pm

    all what i can see is this
    ” Grab this Widget ~ Blogger Accessories “
    and nothing else
    sorry my english not very good
    regards

  • Faisal Laljee August 15, 20083:03 am

    I don’t see the page numbers on the first page, but see it on subsequent pages thereafter. Please advise.

  • Mohamed Rias August 15, 20086:18 am

    hi ??????? ,

    Please update the script. I don’t have that Grab this Widget link right now . Please replace your old script with the script i have in my blog now.

    regards,
    Blogger Accessories

  • Bintang Konveksi August 17, 20087:56 am

    Assalaamu’alaykum Mohamed Rias
    Nice script..
    I’ve tried to my blog, but the result is not like yours. Especialy the lenght. Can you give me some suggestion about this matter. this is my blog http://bintangkonveksi.blogspot.com/.

    Thank you
    Ahmad

  • Mohamed Rias August 17, 200810:01 am

    Walaikum Salam Ahmad ,

    I saw your Blog , but i can’t see this Page Navigation Hack there. Please send me your Template code to my email mohamedrias1103@gmail.com , I will install this Page Navigation Hack to your Blog.

    regards,
    Blogger Accessories

  • DanielPK August 17, 20085:01 pm

    Hi mohamed, i’ve tried using this nice hack…but all i got was this:

    “Grab this Widget ~ Blogger Accessories”

    but whats really strange was the the line above didn’t even exist on your code…but when i copy and pasted…i found it at the bottom of the code which it looked like this:

    “Grab this Widget ~ Blogger Accessories”

    This is the last part of the code? what could be the problem?

  • Mohamed Rias August 17, 20086:15 pm

    Hi DanielPk ,

    Please mention which template you are using. I saw your Technologypublic blog. But there i don’t find any code there. Please send me the template I will add the hack in your template.

    regards,
    Blogger Accessories

  • Sandra August 17, 20089:36 pm

    Hi Mohamed

    I really like your widget and I think it would go perfectly with my blog, but I can´t get it to work either. I´ve tried several times and the only thing I get is the “Grab this widget – Blogger Accesaories” text.
    Something must be wrong. I´m using one of the templates provided by Blogger.
    Thanks.

  • Mohamed Rias August 18, 20082:29 am

    Hi sandra ,

    I hope you are using my old script , please update your script.

    regards,
    Blogger accessories

  • Elke di Barros August 18, 200810:50 am

    Hi Mohamed, tanks for script !

  • Sandra August 18, 20081:05 pm

    Mohamed,
    What script are you referring to? I’m jut copying and pasting the script above every time. Have you changed it from yesterday? Should I try again?
    Thanks
    Sandra

  • Mohamed Rias August 18, 20081:38 pm

    Hi Sandra ,

    Yes I am referring to script I have in my Post. I updated my script , so please replace the old script with the one i have right now in my blog.

    regards,
    Blogger Accessories

  • Sandra August 18, 20081:54 pm

    I just did it, and I’m still seeing the same text “Grab this widget – Blogger Accessories”.

  • Mohamed Rias August 18, 20082:35 pm

    Hi Sandra ,

    please send me your template code to my email mohamedrias1103@gmail.com , I will add the hack to your template.

    regards,
    Blogger Accessories

  • bongjun August 18, 20086:30 pm

    assalamu’alaikum Mohamed,

    thank’s for this coding.

  • Prinz Dodo August 23, 200810:47 pm

    My blog became more exciting. thank you very much. terima kasih dan salam dari Indonesia

  • Miakoda August 24, 20083:58 pm

    Hi! I tried this on my blog, but it seems to swallow some posts. They just disappeared. I wonder if you had any suggestions? Thanks!

  • Taimoor-Blogger August 25, 20087:34 pm

    Assalamu Alaikum,

    Bhai Jaan Their Is A Problem When I Click On Any Number It Only Show’s The Same Single Post Everytime.

  • Admin August 27, 20086:14 am

    It don`t work at me too.Same thing as the previous post.when i click on any page number i get the same page or a random page :(

  • ge0rgian August 29, 20081:08 pm

    Thanks for this.Works very nice on my blog.

  • TRESTIN MEACHAM August 30, 20084:25 am

    Great ideas it’s way better than the blogger default navigation

  • John August 31, 20088:58 pm

    Hi, too good to be true. Did not work on mine even though I followed all the details. I sent you an email. Thanks in advance for the help,
    John

  • iEn September 10, 20084:23 pm

    still didnt working.. it’s empty :(

  • MIRELA September 11, 20089:54 am

    thank u tell us many interesting things..im romanian so my english is not so good:)

  • Lara September 11, 20088:37 pm

    I Have a 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(=500 posts)…

    there is this problem? –>
    "/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999

    Please help me…

  • Samantha BAires September 14, 20083:19 pm

    Mohamed, thanks for your help. I´ve used your widget and it works fine, for CSS I´ve used vagabundia.blogspot.com style. Again, from Buenos Aires, Argentina, thanks for your help and your tips. I´ve suscribed to your email feed.

  • Arificial Intelligence September 15, 20081:16 am

    Really easy. Peice of cake to add this important widget to my blog. I thank you whenever I see the widget in my blog.

  • sai September 15, 20085:26 am

    Thanks for this easy widget

  • lex September 15, 20089:47 pm

    is possible to large de numbers ?

  • Something Marvellous September 19, 20082:04 am

    Hi – this is a great hack, but I am having the same issue as some of the users above – I add it as a page element and nothing is displaying. I currently have the code below the Blog Posts on my blog. Is there something I am doing wrong/missing?? Thanks for your help!
    blog: somethingmarvellous.blogspot.com

  • The Geek September 21, 20082:55 pm

    Great blogger hack!
    And very easy to install as a widget.
    Only having a small issue with the lower border not showing.
    Thanks!

  • rpf_81 September 22, 20084:36 pm

    Dear mohamedrias, your widget is really cool. I was looking for this widget for my blog for a long time. Atlast I got one here. But I have a problem in installing this widget in my blog h**p://gfx-motion-capture.blogspot.com . It skips some pages.. I need ur help in this regard.. I am attaching the template I am using in my blog.. Please check ur mail.. Thanks in advance.

    FERRY

  • otante September 28, 200810:23 am

    This script not working for me.Script dont show all messages and skip lot of messages also cant show previous messages on Blogger.

  • styleaddict September 29, 20085:51 am

    assalamualaikum, Rias

    I have trouble with this widget, the widget can’t work in my blog. How to make widget work in my blog, can u help me? thanks before,

    my blog: http://www.chic-online.co.cc

  • Mohamed Rias September 29, 20081:11 pm

    Walaikum salam Styleaddict ,

    You need to modify the script a little bit. Please send me your template to mohamedrias1103@gmail.com . I will modify and then I will send you back.

    regards,
    Blogger Accessories

  • Sara October 2, 20085:26 pm

    Is there a way to modify this to work in a classic template? I know only a little coding, and there’s no way I could try to change it myself. Is there a way to do this?

  • indungg.com October 2, 20089:42 pm

    assalamu’alaikum rias,.
    this wdgt not works on me, why?
    thanks.

  • davut erarslan October 5, 20082:38 pm

    Oda oyunlar?

    thanks

  • The A of DNA October 6, 20087:15 pm

    It just plainly does not work… I have implemented the code under the post with ALL coding.. I didn’t even bother changing it one bit to see if it would work, but it hasn’t..what could the explanation be?

    would appreciate some help.. http://www.thednalife.com
    thanks.

  • Abhishek October 8, 20084:58 pm

    Hi Rias ,,,,

    I am a new Reader of ur Blog.. and found this is realllly reallly useful for a non-techi person like me….

    This Widget is waht I m looking from days… Really Liked ur workk !!

    One thing I have a Blog

    http://explode-profits.blogspot.com

    Do suggest me how to put NAvigation link like urs… bcoz I add a HTML/JAVA gadget in my laout just before the BLOG POST Element.. then also it is not making any effect on my site..I reallly like ur Navigation work.. if possible please provide me like urrs Navigation link,, and one more thing.. please tell me how I can edit the box size of “Subscribe to my Post ” widget…

    Hoping a quick reply from u

  • Huge Anime Fan :) October 10, 200812:48 am

    Why does it skip some pages when i press next

  • wareus October 11, 20088:45 pm

    Admin… help me… i need your help.. please…

    i use blogspot.. but, my domain is co.cc ( http://wareus.co.cc)

    how to use Page navigation to my blog…

    which the script must i change?

    i`m just trying.. change

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
    var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;

    become…

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = “wareus.co.cc”;
    var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;

    is that true….?

    please.. helo me…

    email me at ucupz_lc@yahoo.co.id

    i hope you want to give the answer to me….

    thankz alot friend..

  • Mohamed Rias October 12, 20082:46 am

    Hi Wareus ,

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
    var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;

    just change the above code to

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-7,thisUrl.length)==”.co.cc/”;
    var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;

    Thats it , Now this Page Navigation Hack should work in your blog. If you still have any problem email me at : mohamedrias1103@gmail.com .

    If you need online support , add that id to Google talk .

    regards,
    Blogger ACcessories

  • iEn October 12, 20082:52 pm

    sad.. still appear my previous posts, not in main page. :( both domain i use it..

  • Mohamed Rias October 12, 20083:15 pm

    hi iEn ,

    in the page navigation script search this line

    thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;

    replace it with

    thisUrl.substring(thisUrl.length-5,thisUrl.length)==”.com/”;

    if still problem persists , send me your template to mohamedrias1103@gmail.com or for online assistance add me to Google Talk.

    regards ,
    Blogger Accessories

  • wareus October 12, 200810:13 pm

    thankz you friend… it`s work…..

  • iEn October 12, 200811:55 pm

    yes.. i change ******.com/ . but i can see in older posts only.. already email to you to fix up. im giving up :(

  • sp October 14, 20089:43 am

    the comments in this ‘post a comment’ page needs same kind of nav so that we can condense comments or focus on the newest/oldest only etc. hopes it’s on one of your enhancement list.

  • Makanan Pontianak October 14, 20084:04 pm

    Dear Mohammad,

    i already copy and paste all the script you give, but still can’t work. can’t show anything on my page, plzz help me in http://www.makananpontianak.blogspot.com

  • Gauntles October 16, 20086:16 pm

    Please help me mohammed,the page navigation isnt working it just doesnt appear.I already tried all the tips but my template code is different,can I send my template’s code to your e-mail?

  • iEn October 17, 200810:42 am

    it’s working. thanks :D

  • amanda October 17, 200812:59 pm

    hi there…
    i’m beginner in blogger and i’ve been trying to create my own blogger template from scratch. i tried your script in my template and it doesn’t work, then i change my template using template from aborregate.com and i try your script and it works. what i want to know is that is there some other requirement to use your script such as in your template you have to have specific b:includable or something like that? thank’s… cool script btw

  • *Tamil Bee* October 17, 20081:05 pm

    thanx that was cool…

  • amanda October 18, 20085:33 pm

    no answer yet eh.. nevermind… i’ve found it. this script need to have b:includable id=’nextprev’ tag (and in my case b:include id=’nextprev’ inside b:includable id=’main’ in blog section) after i’m adding both tag in my template that i make from scratch, your script run just fine… thx… maybe some of the people is having trouble installing your script because the template don’t have that tag…

  • LilMissUrban October 19, 20083:23 pm

    Do you have a script like this for classic blogger? Would be really handy, cheers. Sarah

  • Süleyman S. Aras October 22, 20082:19 pm

    Selam Muhammed,

    I’m Süleyman from Türkiye. Thanks you, for this work. It’s good work really.

  • iPhoneRuler October 22, 20082:52 pm

    Hi Mohamed..

    the script is not working in my blog..

    this is the result: http://img236.imageshack.us/my.php?image=errorkl4.jpg

    :-S

    thank you

  • Alok October 31, 20085:29 am

    excellent work

  • Kiran™ October 31, 20084:42 pm

    Hi Mohamed,

    A bug is there in this widget !
    when we are clicking 2 its going to 12th page !
    Please Fix this.

  • Technomedico November 1, 200812:28 pm

    Hi, Rias, I am a fan of your blog, thanx for such an informative blog keep it up…….Shoaib
    http://technomedic.blogspot.com/

  • richee November 4, 20082:22 am

    hello sir, I have tried th epage navigation hack. But it is not working. The page navigation bar is coming. BUt all the posts are coming on same page, though I have adjusted to one. May you help me please?????

    http://www.ithelpsyoualot.blogspot.com

  • Gilles November 5, 200810:43 pm

    Hello
    http://atablechezclaire.blogspot.com => 6 posts, 5 on the 1st page, you can't see the posts on 2nd page : no post listed.
    Any dea why ?
    Thank you :)

  • Amal November 8, 200811:27 am

    Hi could you please tell how to get the navigation menu seen in your blog that orange one it is very nice.Please tell.

  • solehpolysas November 9, 200812:31 pm

    thanks man, its work…

  • Kiran™ November 10, 20081:09 pm

    Hi Mohamed,

    A bug is there in this widget !
    when we are clicking 2 its going to 12th page !
    Please Fix this.I am waiting for Your answer from days !!!

  • Rajesh N Butpur November 12, 20082:07 pm

    nice hack i hv used in my blog , u can see here

    blogger-godown.blogspot.com

  • sETiawAn November 13, 20089:47 am

    thanks for tips sir.

  • Levi November 17, 200812:29 am

    This is not working for me, can anyone tell me whats wrong? I have done this exactly, no changes to the code whatsoever. look at my test blog.

    http://rhbtest.blogspot.com

    and contact me at (leviyoung85 (at)gmail dot com)

  • manchiraju November 22, 20086:11 pm

    Rias,

    For some reason the code is not working. Could you let me know whats happening?

    http://manchiraju.blogspot.com

    Ravi

  • ROHIT SHUKLA November 23, 20085:53 pm

    this page navigation hack through widget doesn’t work in my blog please solve the problem

    http://blog-testing1234.blogspot.com/

  • SRI GANESH.M ?? November 23, 20086:39 pm

    working.is ther a way to hack other blog,because my old one with my account was hacked.

  • DJ Keiroz November 24, 20084:17 pm

    Hi, Mohamed Rias

    I’d like to use this script but it is not working. I think this is because I use the old blogger. What shall I do? Please help me

  • Luxon Alex November 26, 200810:44 am

    thank you..so nice, very usefully..
    i use in my blogger now

  • ???? November 27, 20089:11 am

    thank you so much …i use in my blog..

  • Daniel November 28, 20084:24 am

    Yes there is a bug on the script. The total post you have will be greater than the sum of the pages. For example I have 24 posts, and I set each page to display 5 posts. Then, using this script it actually shows only 4 posts (5×4 = 20).
    So there should be something wrong with the code.

  • Rabin November 30, 20087:19 am

    superb:::
    thanks for the script works great. but its showing I’ve 32 pages but 30 pages are working. don’t know about the hidden 2 pages. if u wish to see the error visit my blog through my profile

  • Yuniarto Rahardjo December 2, 20081:36 am

    Thanks for the hack..
    It’s work for me :)

  • bas?ncity December 3, 20088:59 pm

    thanks

  • Fun Kruti December 5, 200810:29 am

    Hi i came thru an error while using this hack
    when i click on label it shows the latest posts say 50,
    then when i click on page 2 it directly goes to previous months posts and exclude current month posts

    for eg if i have posted more than 100 posts in nov for label “test”then when i click on test label it shows latest 50 posts then on clicking page 2 it skips next 50 posts of nov and shows oct posts

    hope u got what i said

  • Christian December 6, 20082:40 pm

    esta pagina muy buena!! no entender mucho pero buena

  • David December 7, 20086:02 pm

    Well, for all the people who had problems (not found posts) with this widget: bad news, not even the standard blogger template can work this out. The standard buttons of any blogger template make some posts dissapear. Example, a test blog:
    http://juanaclara.blogspot.com/
    you can go back and you never reach to see the first 3 posts.
    So the problem goes deep :S

    best regards.

  • zn7 December 8, 20088:33 am

    its working.. Thanks Riyaz.

    Can see here http://zn7.blogspot.com

  • MusRules December 10, 20086:47 am

    peter!! help me! where i can get the widget code for classic templat?

    i mean something like this <$widget$>

    i want put followers in my own layout~ >.<

    http://mushi-hilton.blogspot.com
    help me please~ :(

  • MusRules December 10, 20086:51 am

    do help me yeah~ >.<

  • Kojek December 10, 20087:29 am

    don’t work on my blog ????

  • ???? December 13, 200812:16 pm

    Please help me i can’t see nothing in in my blog domain name with co.cc.

  • shiro December 13, 200811:08 pm

    Hi Mohamed,

    I fount the bug in this widget.

    On the first page. It shows post # 1, 2, 3, 4, 5

    However on the second page. It shows post # 8, 9, 10, 11,12. –> It skips post # 6, 7

    On the third page. It shows post # 12, 13, 14, 15, 16. –> It shows post #12 again.

    On the fourth page. It shows post #17, 18, 19, 20, 21.

    This cycle seems to repeat over and over

    On the 5th pages, again it skips posts.
    On the 6th pages, again repeat the posts.
    …..

    Could you please fix this problem?

    Note: everyday, I post only 1 posts.

    Thank you

  • Harvey Wallbanger December 15, 20086:01 am

    AOA,

    Hope you are well. Your post seems very helpful however, when I try to implement it in my blog it is not at all working. Could you please assist?

    Thanks,
    Bilal

  • graphics boy December 15, 20082:01 pm

    thaaaaaaaaaaaaaaaaaaaaaaaaaaank yoooouuuuu veeeeeeeeeeeeeeeeeeeeeeerrrrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
    muccch

  • freethemes-sonyericsson December 17, 20084:35 pm

    good tips

  • Dweapons December 18, 20087:06 am

    dear thanx for the help

    but its not working on my blog

    when i m click on page num 2 to 3 there is written like that (No posts match your query)

    now what i have to do???

    is there change little????

    pls help

    my blog is http://dweaponsclub.blogspot.com/

  • Avinash December 26, 20089:09 am

    Hiiii
    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.

    http://avinashtech.com

  • Rashmi Ranjan December 27, 20083:42 pm

    Many many thanks for creating such a wonderful script……for those who dont trust this script visit http://www.mastiatmax.blogspot.com/

  • G.RAGAV December 29, 20089:30 am

    THANK YOU VERY MUCH.I LIKED UR SITE

  • Si Kurochan December 31, 20088:23 am

    Owh, pakai Platform Blogger.com yah..

  • napwarden.com January 5, 200912:58 am

    I added this to my blog. I wonder, is there a way for it to show up on the first page? It seems to be working, just not on the first page….

  • suryaden January 5, 20098:42 pm

    its work on my blogs, thanks alot…

  • Yos January 5, 20099:49 pm

    I have the same problem with Shiro…
    Any another way to fix this?
    BTW..good post.
    Thanks

  • Mr. XTRO January 7, 20093:10 pm

    I have 10 post in my Blog (http://xtro2.blogspot.com), and the var pageCount=5 (as the configuration of the Blog).
    Also have the var displayPageNum=5.
    However, the script shows a total of 3 pages. When you push in page 3, the spript redirect to a page without posts.
    Please, help me!

  • Winjaime January 9, 20091:05 am

    thanks, it was very useful

  • Michael January 11, 20097:49 am

    this is going crazy
    i dunno y not all the post are showing up
    its really not helping fully
    hope can find solution soon

  • Aloks January 14, 200910:31 am

    Hi Mohamed Rias, i am searching this plugin for along time and finally got it from your friends (Amal Roy)blog. he gave me the URL of your blog and finally i am here. But i have a question can i use this plugin in WordPress? explain me.
    TIA

  • callmekelly January 18, 20097:06 am

    Hi,
    I can’t get mine to come up at all. Could you take a look at my site http://rnrreviews.blogspot.com/ and tell me what’s wrong?

  • Mania January 19, 20099:06 pm

    Exelent trick…

  • Ajin Jude January 21, 200910:05 am

    hey,
    i also used ur script, it is working but not
    as shown in the pic this does not have a blue background in my blog……..any suggestions?

  • P2PDesi.Com January 22, 20093:52 am

    It works perfectly on home page but does not work for labels please can you help me url site is p2pdesi.com

  • P2PDesi.Com January 22, 20094:06 am

    i figured it out myself thank you verymuch

  • Andy T. January 22, 20094:08 am

    I keep trying this widget but it is not working for me, i use a custom domain http://www.moviesgateway.com, plz help, I really like the hack!

  • Crazee Boy January 23, 200910:41 pm

    Hi,
    This hack did not work for me, The problem i facing is ” When i click on page 2 then it left several posts.”

    Kindly FIX this error

  • AVIANT.NET January 24, 20098:10 am

    Terimakasih bang , Artikel anda sangat berguna buat saya , terimakasih sekali lagi .
    Salam kenal dan sukses selalu .
    Wassalam

  • ROHIT SHUKLA January 27, 20094:01 pm

    Thanks for this coding i installed this code in my blog and its working perfectly.

    http://easyearningbyhome.blogspot.com

  • aLiN February 3, 20092:01 pm

    I implement this on my blog. Work great.
    http://uhavetoknow.blogspot.com
    Btw rias i send you a mail, hope you’ll answer.

  • Elly February 4, 20092:49 pm

    Salam Rias.
    Googled “blogger page number” and got to your site. Fantastic work. Thank you.

  • Marcher February 5, 20092:18 pm

    Great work, thank you Mohamed.

  • Sophea February 13, 20099:16 am

    Thank so much. You really give me what I am looking for.

    blog-header

  • ???? February 21, 20094:52 am

    It’s wonderfull
    I use it
    thanks
    http://sexeden.blogspot.com/

  • Rohit KIshore February 25, 200910:04 am

    how did you put screen shot

  • D-Pirate February 27, 20092:02 pm

    Hi Rias thanks but ! i want pagination to look as your that lovely background like yours can you tell me what to do to look exactly like your
    plz mail me at mittal.ankur1988@gmail.com

  • never mind February 27, 200911:55 pm

    thank you

  • Nap Warden February 28, 200910:39 pm

    Please help me! I can’t get this to show up on the home page? It show up on all other pages…What am I missing?

  • Nap Warden February 28, 200910:43 pm

    Oh, My blog is http://www.napwarden.com

  • Henry Ramirez March 3, 20095:41 am

    thanks,,this was great and easy..

    http://www.elpatiord.com

  • SANDEEP March 3, 200912:57 pm

    Oh Gr8 I used it on blog and it is rocking

  • maiaT March 3, 20092:44 pm

    It is a beautiful widget, I should like to have it but nothing shows up but the title.
    Could you give me some advices please?

  • Tomaz Vorsic March 3, 20096:42 pm

    Hi. First of all congrats on your blog. Very very good.
    I tried this hack and it works fine until I click “last page”. When I click this button it says no post match your query.
    Please visit my blog http://www.computorial.blogspot.com and tell me what is wrong there.

    thanks

  • james March 4, 20096:06 pm

    I tried 4 different templates AND IT DOES NOT WORK
    I followed the instruction step by step..

  • Muhammad Masood March 5, 200911:25 am

    not working correctly

    http://ebookcastle.blogspot.com

    any one can help what is the problem

  • By H@risP@p March 5, 20095:49 pm

    I have 2 blogs. At fisrt I installed your widget (about 2 weeks before) and it works! But I have problem with my second. I tried for first time yesterday. Why?????????????? What is the differense?

  • CASPER March 7, 20099:29 pm

    i Cannot use this widget
    when i press next or page number 2, 3, etc.
    always show the last page
    can you help me with this.

  • VAGGELIS March 8, 200911:21 pm

    not working for me

  • Techie 94025 March 9, 20095:13 am

    Not WOrking
    please check it for my domain

    http://www.networkzindia.com

  • ICKITT March 14, 20091:07 pm

    the counting numbers (Page 2 above) of lable and achieve pages are not correct

    for example is lable xxx has 9 posts and display 2 posts per page. Page 1 will display 9 post (1-9), but since page 2, only 2 pages displayed on each page, that is Page 2 displays 3-4, Page 3 does 5-6 …

  • ICKITT March 14, 20091:08 pm

    please check my blog:

    ickitt.blogspot.com

  • Zach March 18, 20092:19 am

    thanks. it works. but why only showing in the archieve and label? not in the main page? :( helpp

  • Dusty kid March 20, 200911:36 am

    Unfortunately, doesn’t work for me as well? any help would be appreciated. thanks

  • EditorPinoy March 20, 20092:41 pm

    Thanks for the Tutorial ^_^

    I also made a tutorial about Navigation Tabs/Links but mine is using CSS Tab Designer. Its really easy. Just COPY and PASTE! To all visitors and readers try this out:

    Navigation Tabs in Blogger using CSS Tab Designer

    Thanks! ^_^

  • vie~avola~vie March 22, 20092:02 pm

    Hi,

    Added this in my blog. Very useful and like it very much.

    Thanks for sharing this.

    :..vie..:

  • atti world March 22, 20095:46 pm

    Hey friend i dont know y but none of ur hack is worling in my blog…can u help me….??

  • tipsandcara March 25, 20095:28 pm

    ok, bos…. it;s work thank
    http://www.belajarblog80.blogspot.com

  • tipsandcara March 25, 20095:29 pm

    ok bos….thanks it really work.
    http://tipsandcara-ngeblog.blogspot.com

  • tipsandcara March 25, 20095:31 pm

    ok bos….thanks it really work.
    http://tipsandcara-ngeblog.blogspot.com

  • Ev.L March 26, 20092:54 pm

    Thx mhohamed. But how can I modified the page navigator look more pretty? because this one look too simple. Can you teach me how to make look like the page navigator from this blog? Thx

  • Ev.L March 26, 20092:59 pm

    hello Mohamed. Can you teach me how to make comment box look like your, each comment have box around it. Please teach me. thx

  • Lizeth March 28, 200911:31 am

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

  • Ev.L March 28, 20092:00 pm

    This page navigator have bug. Every time i press next page or page 2, it will skipped 1 post. Pls fix it pls.

  • Emad April 8, 20097:45 am

    Great Post.
    Thanks Buddy

  • "Illegal or not" April 9, 200912:48 pm

    It’s not working. I changed the theme on my blog, could this be a reason why it doesn’t show anything ? With the current theme i changed it shows “older posts” and “new posts” and that’s it. Does this “trick” that you showed us only work on default blogspot themes ?

  • ___4.n.n.4___ April 15, 200910:14 am

    Already try both method. But it seems doesn’t work for my template. Btw thanks a lot for the tutorial

  • Red Leaf Network April 21, 20096:45 am

    it will never work. it’s garbage. don’t use it. page 2 or ‘next’ will skip and on a 6 post label with 5 var count you won’t see anything on the second page. from mohamed to amanda to every blogger ‘helper’ it;s the same crap being tossed around. don’t waste your time.

  • ????????? April 23, 200910:17 pm

    slm!
    sorry but it doesnt work!could you put the same hack that you use on your blog?

  • Panther® April 24, 20097:44 am

    Sorry not working for me either :(

  • derekengavin April 25, 20099:05 am

    howdy! i have installed your page navigation widget at my site, but the widget does not appear..

  • Admin April 28, 200912:46 pm

    A fool in love that makes no sense to me but you are a fool if you don’t love mohamed’s post. so, I love you mohamed :)

  • ??? April 29, 20099:12 am

    hi!I have a problem.
    I have use this method,but I find a bug.
    I don’t know how to solve it.
    if I have 7 pages,and I make “var displayPageNum = 3″when I am at my homepage,I want go to page 2,but it doesn’t work.It goes to page 4.
    My question is how to slove it.
    Could you give me the tip?

  • Jaxter April 29, 20099:04 pm

    its impossible to shown in my blog
    i tried so many times please i need solution!!

    http://gamesms.us

    plz mohamad reply

  • fizza May 4, 20097:04 am

    why it doesn’t appear in my blog..

  • Rajesh Kumar.Chekuri May 9, 200912:16 pm

    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/

  • Crillin May 9, 20091:56 pm

    itz grt widget…but its not working well in my blog…….
    the page 2, 3, 4 and next is not working well ….it does nt show all the post…..
    when i klik page 2…..it shos 3 or page 4 element …..plz help me to sort out the problem…
    my blog address….http://www.heart-of-angels.blogspot.com

  • toofast May 11, 20098:00 pm

    I tried to install the code as a widget but is not appearing on the page. Look at the page footer there: http://minimalsource.blogspot.com/

    Could you please help me please?

  • DebiCody May 18, 200910:49 am

    Hi, great post. But i’m also having the same problem like the others. I’ve tried adding it but it’s not appearing.

    http://debicody.blogspot.com

    please, please, help me. thanks! :)

  • footynation May 18, 20094:43 pm

    hi mohamed
    i saw that the code was working in some blogs but it doesnot work in mine. Can u please advice on how i can fix it. Anyways, i love this website and the many hacks you have. You are awesome.
    http://footynation.blogspot.com

  • eCabs May 20, 200910:30 am

    Not working for me :(

  • Sudeep May 28, 20095:31 pm

    is does n’t work on me pls help

  • N. Ro May 30, 200911:03 pm

    i did that but it skipped 2 pages, when i click next. Please let me know what is wrong!

  • Sandeep June 9, 20096:52 pm

    Its not working help me out

  • mosalsalat-arb June 9, 200910:00 pm

    assalamo 3alaikom mohamed
    i saw that the code was working in some blogs but it doesnot work in mine. Can u please advice on how i can fix it. Anyways, i love this website and the many hacks you have. You are awesome.
    http://mosalsalat-arb.blogspot.com

  • laikepo June 11, 20091:45 pm

    It can't work for me… Need Help

    http://laikepo.blogspot.com/

  • ~Aman~ June 13, 20099:42 pm

    Hi could you please tell how to get the navigation orange menu seen in your blog .Please tell me.
    in my template it's not working
    http://onlineicon.blogspot.com

  • JORGE June 19, 20097:13 am

    muy bueno tu comentario

  • funcoolpix August 16, 20093:46 pm

    not working :(

  • Sudeep Acharya May 26, 20106:16 pm

    Nice post dude

  • Paola January 24, 201111:04 pm

    Hi there

    is anything nwe to change in the code in the meantime?
    I’ve also changed the final extention since my web ends in .org

    so far, no numbers.
    - I sue the simple model for blogger.

    your help will be very much appreciated

  • Gadget Review May 14, 20117:16 pm

    Thank You for the tutor :)

 
 

185 Responses to "Page Navigation Menu Widget for Blogger"