
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="Previous";
var downPageWord="Next";
</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:
there seems to be a bug in this :-o
It has been fixed now and changed styling too doesn't overlap now.
working great in my blog. thnks :))
It's working..
Thanks bro..http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif
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.
it works perfectly, thanks!:)
Thanks alot! awesome!!!
not working on my blog )): can you please help
Its working fine i checked little problem is with color of widget that you can alter from codes.
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
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..
Hello Dear!!!
Thank you very much again and again.I love your tip.
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
@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.
Thank you for sharing this. It is really helpful for me. I added it to my blog. Again Thanks!
Sad.:(( So this problem cant fix? I really want to put page navigator to blog but i dont want some post were skipped.:((
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/
not working . why i dont know. my site is http://corporatetoday.blogspot.com
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
ihave 7 posts.i made each page 1 post.last 2 pages my posts are missing.i donno why?
i'll try this. tq for this tips
great! thank you
It is not work properly. Some posts no show.
It doesn't work, displays nothing... :(
It doesn't work, displays nothing...
pls help
dude
It doesn't work, displays nothing...
pls help
cant u install for my template
iwull it if u say u r mail address
how to change the background of those columns?
Thanks
whenever i click on 2 page it jumps to 10th page its causing problem
www.softcorner.tk
Thanks, everything working great.
thanks a lot i was looking for it!!!
plz help me this code is not working on my blog. what to do? take me email id to reply anummaqbool@yahoo.com
thank u very much ,it work perfectly.
Please update your script from this Page Navigation for Blogger (Problems Solved)</a
Thanks for the codes. The navigation works very well on my blog.
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/
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
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
@easy link not working.
Sorry for that
http://gamezine.info
&
http://gbestmovie.blogspot.com
these both are using same type of Blog Page navigator
@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.
So Can you pls give me this code for my blog .where u get this code .
my Email id is zinn1986@rediff.com
SIMPLEST AND EASIEST......LOVED IT...THANKS FRIEND
It is working but the images are not visible due to some account problem
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?
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 ..
It does work. Thanks!
Thanks a million
thank u
Post a Comment