----------------------------------
Page navigator has a scroll bar beneath the slide-slide to replace the next and prev buttons to display other pages.
As an illustration for the navigator to scroll the page as shown below.
-----------------------
------------------------------
How do you want to try it too? Please copy the codes below.
Copy the CSS code below and save the above code]]> </ b: skin> or </ style>
======================
.paginator{margin:0 10px 0 -8px;font-size:1em}
.paginator table{border-collapse:collapse;table-layout:fixed;width:100%}
.paginator table td{white-space:nowrap;text-align:center;padding:0}
.paginator span{display:block;color:#fff;padding:3px 0}
.paginator span strong{padding:2px 6px;}
.paginator span a{padding:2px 6px;color:#888}
.paginator span a:hover{background:#ccc;color:#000}
.paginator span strong{background:#878773;font-style:normal;font-weight:400}
.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/AVvXsEiRC3YMrscN7hQmgrP03PpOFiODD3CatLuCAAmerIpoXprHldgXz4bCyqOQN0Nt-0qgP7DxV26Ek8_sg2aXx_VVn1LCqhJsvONUxVPDNSLJ650jjaT8bmEJ9Uls12l_g7U00Say9GXXLCZB/s1600/slider_knob.gif) no-repeat 50% 50%;cursor:pointer}
.paginator .current_page_mark{position:absolute;z-index:1;top:0;left:0;width:0;height:3px;overflow:hidden;background:#878773}
.fullsize .scroll_thumb{display:none}
.paginator_pages{width:600px;text-align:right;font-size:.8em;color:gray;margin-top:-10px}
---------------------------------
================
To scroll the image it is worth re-uploaded on each blog and please adjust the colors to match the theme of each blog.
Then copy the code below and save callers blog page like the example code below.
============
-----------------------------------
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b: widget id = 'Blog1' locked = 'true' title = 'Post Blog' callers code here! </ div>
---------------------------------
=====================
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
.......................................
.......................................
.......................................
</b:widget>
</b:section>
callers code here!
</div>
======================
Below is the code that you should copy their callers.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script src='http://yourjavascript.com/222106553/page-scroll.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=8;
var numshowpage=6;
</script>
<script src='http://yourjavascript.com/354622140/page-scroll-blogger.js' type='text/javascript'/>
</b:if>
</b:if>
-------------------
=========================
For security please js hosting his own account. Figures 8 to set the number of posts on each page and the number 6 to set the total number of pages that appear.
And after I try it turns page navigator is responsive too, which means that the width of the page navigator to follow any width devices so appearance does not pile up.
Good luck ....
=====================
