Page Navigation Widget Blogger




Page Navigation hack is now also available in bloggers. As you may be viewing the numbered menu widget below the posts to visit the latest or previous posts. as these widgets are only provided in wordpress blogs or hosted blogs.But now his hack has been made available in bloggers also with the help of Mohammad Rias who always come out with these hacks.

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

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Edit/Html.

Now Find for ]]></b:skin> tag and place below codes before it.



.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}


Now search for </body> and place the below codes before it.


<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&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){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+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'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++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>


In the above code you can find the below written word and can change its value from 5 to any you want.

1 : var pageCount=5;

*where 5 is the the number of post that apppear in another page you will visit.

2: var displayPageNum=2;

*This code determines the number of additional page navigation numbers that will be displayed on the page.

If you didn't liked its look try out the another numbered page navigation Widget.

49 comments:

Bariski said...

there seems to be a bug in this :-o

Anshul said...

It has been fixed now and changed styling too doesn't overlap now.

sop said...

working great in my blog. thnks :))

Toto said...

It's working..
Thanks bro..http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

Thank you said...

Dude, thank you so much, your code works perfectly for me. Your post is amazing, I've tried more than 10 other methods, but none of them works.

jib said...

it works perfectly, thanks!:)

Richmond said...

Thanks alot! awesome!!!

james said...

not working on my blog )): can you please help

Anshul said...

Its working fine i checked little problem is with color of widget that you can alter from codes.

Dreak said...

It only display max of 50 or 100 pages my blog has 1200+ posts and max post per page is set at 10 so i must have 120+ pages but i only have 50 pages

Anshul said...

I dont think any one will browse your blog 120 pages one by one...it will prefer to search friend...this is just for beautiful look or check some few last posts any of your reader missed..

Anonymous said...

Hello Dear!!!
Thank you very much again and again.I love your tip.

Ev.L said...

This code have many problem. My blog have 127 post and I make each page 10 post, so the last page suppose have 7 posts, but it just have 4 post... 3 post where missing. This probably due to the page 2 problem, when I press to page 2, 3 post where missing, I mean 1st page have 1-10 posts, and page 2 suppose have 11-20 posts, but in my blog 3 posts were skipped, at page 2 the post is 14-23, 3 posts were skipped :( Pls fix this problem pls

Anshul said...

@Ev.L ya there is problem sometimes it misses one of the posts from between and also can make problem when there are 1000s of post.I will try to evaluate it but if you will contact the rias designer of this widget will be good. As he will clearly tell that it can be fixed or not. I have placed his link in tutorial.

Only Messages said...

Thank you for sharing this. It is really helpful for me. I added it to my blog. Again Thanks!

Ev.L said...

Sad.:(( So this problem cant fix? I really want to put page navigator to blog but i dont want some post were skipped.:((

Rajesh Kumar.Chekuri said...

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/

blogger said...

not working . why i dont know. my site is http://corporatetoday.blogspot.com

Anshul said...

Ya friend it doesn't work in my design too as this widget has been designed keepng in mind the blogger default template.Its all on template codes that it accepts the widget or not.If its not working you can't add it.Sorry for it.

Why dont you use this hack like me change lder posts link

noor hasmah bte selamat said...

ihave 7 posts.i made each page 1 post.last 2 pages my posts are missing.i donno why?

ian said...

i'll try this. tq for this tips

Text Messages said...

It is not work properly. Some posts no show.

Vidbird said...

It doesn't work, displays nothing... :(

Latest You Want said...

It doesn't work, displays nothing...

pls help

dude

ravi said...

It doesn't work, displays nothing...

pls help

cant u install for my template
iwull it if u say u r mail address

jeyaganesh said...

how to change the background of those columns?

Owner said...

whenever i click on 2 page it jumps to 10th page its causing problem

www.softcorner.tk

Antonina said...

Thanks, everything working great.

Skanda said...

thanks a lot i was looking for it!!!

IshaMayrub said...

plz help me this code is not working on my blog. what to do? take me email id to reply anummaqbool@yahoo.com

flowers said...

thank u very much ,it work perfectly.

Joe said...

Thanks for the codes. The navigation works very well on my blog.

Abu Farhan said...

hi I have new Page Script and Scroll Page navi and other style it can solve all problem please come here http://www.abu-farhan.com/tag/page-navi/

izzreen said...

thank you so much
i have implemented in my blog&it works!!
..u have helped me& i ll help u
i have best way to get unique visitor to your site
simplr register at
http://www.yavrim.com/?via=19307
...try it and u will realy surprised

esydownloads said...

hello Anshul
Do u know about this type of Blog Page Navigator

http://gamzine.info

becoz above page navigator is not working in my blog

Anshul said...

@easy link not working.

Esydownloads said...

Sorry for that

http://gamezine.info

&

http://gbestmovie.blogspot.com

these both are using same type of Blog Page navigator

Anshul said...

@easy and one more site using it http://www.funnypictures.net.in
This is my funny blog adress :) I dont know who made this exacly but i am using.

Esydownloads said...

So Can you pls give me this code for my blog .where u get this code .
my Email id is zinn1986@rediff.com

Malhaar Kale said...

SIMPLEST AND EASIEST......LOVED IT...THANKS FRIEND

Sanskar Shrivastava said...

It is working but the images are not visible due to some account problem

wereintergalactic said...

The code is at the top of the page I seem to be having trouble with all these codes ? Is there something I'm doing wrong?

wereintergalactic said...

I've tried so many sites and I can't figure out how to post this code or any of the codes for page numbers ...I tried before and after the skin and body...It just doesn't work .. please help me ..

iScreeneer said...

It does work. Thanks!

JD said...

Thanks a million

Post a Comment