Thursday, February 2, 2012

How To Make Blog Page Number Navigation

How to make a blog page number navigation easily

Actually sometime hard to find working number navigation
 gadget for blogger.So this post will help you to add page
number navigation easily. it will helpful to your visitors to
keep watching your other post.so you can increase page-views.
Its just  blogger widget . try it.

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.
How To Make Blog Page Number Navigation
<style type='text/css'>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;

}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

</style>


<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

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

}

</script>
<script type='text/javascript'>

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){
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>

You can change 1 and 3 and color code as your like.get your color code here

4. Save HTML/Javascript. you are done.

43 comments:

  1. whoa!! cool post and thank you :))

    ReplyDelete
  2. this is too easy :D
    thank

    ReplyDelete
  3. Nice trick Soha Rox..!! Long time not to visit your blog, it looks better than before.

    ReplyDelete
  4. Hi,
    On the site: der-postillon.com I saw that there are ads around the template. A Banner over the head and another one on the right side. It is also a Blogger Blog - do you know how to implement that? I would really like to know.

    ReplyDelete
  5. I cant explain it with few words. If you want to know it. contact me via contact form.

    ReplyDelete
  6. Nice post buddy. It is very helpful for remembering the page where a visitor last visited.

    http://www.shinemat.com/

    ReplyDelete
  7. Thanks for sharing this but this number navigation shows same in post n it doesn't work perfectly in labels. Is there is any way to fix it ?

    ReplyDelete
  8. hi thanks for the share dude..... my problem is same the previous(user comment)..... please fix it.......... thanks in advance cyberfinger.blogspot.in

    ReplyDelete
  9. This is a cool trick, I have modified my blog with this change it looks quite awesome, thanks for the post...

    ReplyDelete
  10. Thanks for this. too easy to implement in my blog!

    ReplyDelete
  11. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

    ReplyDelete
  12. I love this. This is the only trick I've tried that actually displayed quite well on my blog. The only problem I'm having is that every-time I click on next or page 2, it says "No posts match your query. Show all posts". Could you help me? I really don't want to look all over the internet for another alternative. I want to stick with this one.

    ReplyDelete
  13. cool tips. it's working on my blog.

    http://rempitmp3.blogspot.com/

    ReplyDelete
  14. thanks for this gadget.. bollymirchy.blogspot.com

    ReplyDelete
  15. Very helpful information. Thanks for Sharing.

    ReplyDelete
  16. not work...pleas help
    http://admiratork.blogspot.com
    now is ?max-results=100
    if change ?max-results=5 (for pagination)+ script
    the script not work for me
    please help
    i have ~ 350 posts
    thanks

    ReplyDelete
  17. @AdmiratorK
    This is work fine.i checked it already.

    ReplyDelete
  18. This is awesome but when I implement this, older post and newer post links are disabled. How we could keep those links also??

    ReplyDelete
  19. Hi there, I have a question, a problem will be more suitable, I paste the code and everything is working, problem is that only a post is found in each page, can't i customise it and make it a 5-6 posts a page?

    ReplyDelete
  20. @jeff Khoo
    I mentioned it.
    Find var pageCount=1
    Change 1 as your like.(number of post you need to show in each page)

    ReplyDelete
  21. very helpfull post...
    http://niharsarkar.blogspot.in/

    ReplyDelete
  22. thanks alot this is working great

    ReplyDelete
  23. My blog has nearly 770 post. But in page navigation it shows only first 500 posts. (showing only 51 pages, where it should have been 77 pages)

    Do you have any idea how to fix this issue ?

    You assistant will be more appreciated.

    ReplyDelete
  24. Great post!! helpful for blogger Navigation on my blog Intelligent computing

    ReplyDelete
  25. Thanks,,,
    very helpul for my blog,,,

    ReplyDelete
  26. hi, thanks for this but i just wna check if its possible to not have the entire page refreshed when i change the page. I have music playing in the background so i dont rly want it to refresh my music player after every page. thanks sooo much

    ReplyDelete
  27. it only shows only 1 post per page.. wat to do help me yar

    ReplyDelete
  28. Thanks so much. It works perfectly and very easy to apply.

    ReplyDelete