Beautiful New Page Navi For Blogger With Scroll

This is Page Navigator (I used it, see on the bottom page). I will post how to used it,. It's not very simple, but i will explain how to use it and made it look like simple
Step 1 (Add CSS) :

1. Go to design => Template Designer
2. Advanced => Add CSS
3. Copy + Paste this code

.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/AVvXsEinu4tFmKxqqPmHJ98gEzBMxm4CjErBTiLJyOYP__9xhzaVNclywIohiUbVzjxbQjqFPBjXZNsZnPyWFzdVqBrSlijDrGGpgdVP2ZP2UHk09xtNQBYL7Fnieauf5IhH4VyvJies0r1t7n8/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;
}

4. Apply to blog

Step 2 (Apply JAVASCRIPT) :
1. Find This
</body>
2. Replace it with

<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=3;
var numshowpage=5;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>

Change based on your blog setting :

var postperpage=3;
var numshowpage=5;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Tittle : Beautiful New Page Navi For Blogger With Scroll
Source URL : https://hazbiynews.blogspot.com/2012/03/beautiful-new-page-navi-for-blogger.html

You can share or copy this article | Beautiful New Page Navi For Blogger With Scroll | to your blog/website, but don't forget to submit the source url of Beautiful New Page Navi For Blogger With Scroll

You Might Also Like: