Beautiful New Page Navi For Blogger With Scroll

Author
Published 20:49
Beautiful New Page Navi For Blogger With Scroll

Hello my friend PC, this afternoon I will mengepost Beautiful new page navi for bloggers with scroll.
how to make it easy you just follow the steps below.
no need to linger longer simply suck.

1. Sign in to Blogger > Edit HTML.
2. Paste the following code in the ]]></b:skin>.

/* Paginator */

.paginator{margin-top:10px; 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:#000; font-style:normal; font-weight:normal}

.paginator .scroll_bar{width:100%; height:20px; position:relative; margin-top:5px}

.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:-3px; left:50%; margin-left:-9px; width:20px; height:20px; overflow:hidden; background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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:#fff}

.fullsize .scroll_thumb{display:none}

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

.paginator a:link, .paginator a:visited{color:#fff}



3. Copy the code below and paste the above code </body>.

<script src='http://exdot-paginatoratas.googlecode.com/files/exdot-paginatoratas.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=10;
</script>
<script src='http://exdot-paginatoratas.googlecode.com/files/exdot-paginatorbawah.js' type='text/javascript'/>

Keterangan:

- Postperpage : How many Post every Page for your blog

- numshowpage : how Many number will show in Your page Navigation
Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)


4. Save Template.

[ADS] Bottom Ads

Pages

Copyright © 2021