ADD NEW PAGE NAVIGATION WITH SCROLLER FOR BLOGGER

As we always Do, Making it easier for your blog user to navigate your blog easily with a single click. I think you had seen it on many blogs or sites, I would like it on your blog as there are many options starting from 1 till end page of your blog. Basically when the user comes to the end of a post, they have a option to directly jump on a page without going back to the page having the post which they have viewed.

ADD NEW PAGE NAVIGATION TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Copy and Paste the following code just above the code you have searched.

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc_Xljtt5PAcSpmSiGrG1R2zhy2D93-bC2v0HQjwjQXMNh6Ar-gUj46JrbOUp0HwyFRVUuMLvCc-wil57vAZWVfr-Gd20V1OYDQiLDJIPxkj6nTDs9jflGvUubnEMN1uO1JOvrIYVCwE/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;

}

5). Find the following piece of code in your blog HTML code. 

</body>

6). Copy and Paste the following code just above the code you have searched. 

<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'/>

NOTE :-  You can change number shown in your page navigation by changing 'numshowpage=6', and change post shown on each page by changing 'postperpage=7'.

7). Save your template.

If you got a good experience than leave comments and Email Me for any assistance.