Stylish Attractive Page Navigation Style 2 With Scrolling For Blogger

Attractive Page Navigation Style 2 With Scrolling 

Hi Bloggiyan! We Just recently Update our default page navigation due to 500 plus post. As you can see in animated preview in above or you can also check on our main page. After fully testing of page navigation widget we decide to share with blog admins. People Call it apple style page navigation widget for blogger use. This widget also known as Paginator 3000, The idea for this widget By Ecto (ecto.ru) and coder is karaboz (karaboz.ru). To begood Credit Always Goes To real publisher, So its publish By abu-farhan.
We are sharing this stylish scrolling page navigation widget to save bloggers time .

Lets start to make your blog more beautiful with this widget.

STEP TO ADD ATTRACTIVE PAGE NAVIGATION SCROLLING STYLE 2 INTO YOUR BLOG.

Step 1

1. Go To Blogger Dashboard.

2. Chose Your Template 

3. Click Edit Template 

4. Find This Code ]]></b:skin>
5. Copy The 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9kT9Q3BZ6DKdZFai03BKZ4PLTRqdor07jWMT83HQ38HPGZgSWW3wCjaEHBfiWVxKk0AKTvp2jxiAZn38HWPdRW_oVQwYl1ldMiBp72OprvhppAdASu5_mDe9Vg2N-208uEZDctfgMS5o/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; }

Step 2 
6. Find This Code </body>
7. Copy The Below Code Just Above </body>

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

8. Save Template Done! 

Modification Based On Your Blog Pages View Setting 
var postperpage=7;
var numshowpage=6;
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

LABEL CUSTOMIZATION 

Go To Template Edit & Search Follwoing Code 

'data:label.url'

And Replace with Below Code

'data:label.url + "?&max-results=7"'

Change 7 Base On How Many Post Every Page on your Blog. 

Save Template Done! 

Lets Start Navigate Your blog Pages  

Hope Its not Difficult, If you failed to deploy Don't worry We here to help you.

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post