Stylish Attractive Page Navigation Style 2 With Scrolling For Blogger ~ Warrior Tricks

add code here

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/AVvXsEhxO1iU72o9ZNsOrenFc2bfKBWNyxl1OacqDzd02ekJITQ5PbJvsvUbtL2R0iYyfGeU7Xq_s6MedhpCnXYb-WMPVCjM7Yi4tQdgFGKMAMCTiQ-5IoEyniJBV-nqxb_Mj8n5tIJISZnhQNw/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 + &quot;?&amp;max-results=7&quot;'

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.

Stylish Attractive Page Navigation Style 2 With Scrolling For Blogger

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

LABEL CUSTOMIZATION

Before we Move, You may Also Liked to Read:

Related Post

3 comments