Wednesday, 29 February 2012

Awesome Page Navigation Widget For Blogger With Scroll


Page navigation widget helps your readers to jump from one page to another page directly.This page navigation widget was developed by karaboz and abu-farhan converted it into blogger.It has a small knob at bottom by which any visitors can go directly on last page,also they can select any page on your blog.Search on Google you will see many widgets about page navigation but if you are using this widget then your reader/visitors can go to a specific page which they want.



See Demo At Bottom Of My Homepage

How To Add Page Navigation Widget To Blogger?

You can add this widget in just two steps.
  1. Adding The CSS.
  2. Adding The Script.
Now lets see how to add page navigation to your blog.


Adding The CSS

  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Backup your template.
  3. Now find ]]></b:skin>
  4. Add below code just above ]]></b:skin>.

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}


Adding The Scripts

  1. Now find this </body>
  2. Add below code just above that.

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>




Change based on your blog setting :

var postperpage=7; (Line Number 6 In Above Code)
var numshowpage=6; (Line Number 7 In Above Code)

Postperpage : Number of posts per page
numshowpage : Numbers to show on widget (Recommend - 6)

I hope you will like this widget.


13 Comments : Read Them Below Or Add One

  1. its not work
    i looking bad see http://fotofire.blogspot.com/

    ReplyDelete
  2. not work for me :( visit it http://msfd4u.blogspot.com/

    ReplyDelete
    Replies
    1. It works OK for mine.
      www.kool4us.blogspot.com

      Delete
  3. Hi rahul, What a coll tutorial. thanks a lot for posting this. Great work.

    Jiya
    www.shoppingstylenus.com

    ReplyDelete
  4. How to remove Script By Abu Farhan????

    http://www.vidzpro.com

    ReplyDelete
  5. hello bro it doesnt show in my site this is my site medialivecenter.com plz reply fast thank u

    ReplyDelete
  6. Works on my blog. Thank you so much.

    ReplyDelete
  7. Its working but how to remove the atrribution and add page numbers in that position :)

    http://techbayworld.blogspot.com/ <--- Blog

    ReplyDelete
  8. This is a great help.. Thanks a lot on this info..



    Email storage

    ReplyDelete
  9. A username and password are being requested by http://scriptabufarhan.googlecode.com. The site says: "Google Code Subversion Repository"

    ReplyDelete

If you want to be informed about any replies then click on "Subscribe by email" (present below of comment box).PLEASE DO NOT SPAM