Add Stylish Round Numbered Page Navigation for Blogger

When you started blogging the blogger will not give any Page navigation option.We only want to create.There are many stylish navigation tools for blogger.But it is difficult to follow it and installing it in blogger.So I decided to share an Stylish ROUND NUMBERED PAGE NAVIGATION for blogger.You can get this tool for your blog in simple two steps.You can take an live demo on it also by clicking the bellow

Add Stylish ROUND NUMBERED PAGE NAVIGATION for Blogger

                                                                             Live Demo

How to Add Stylish ROUND NUMBERED PAGE NAVIGATION for Blogger?

  • Go to Blogger > Dashboard > Edit Html > Proceed
  • Then search for ]]></b:skin>
  • Then paste the following code given bellow above ]]></b:skin>

.blog-pager,#blog-pager{font-family:”Times New Roman”, Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;}
.showpageNum a,.showpage a {background:#000; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageNum a:hover,.showpage a:hover {background:#FF0000; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:’Coming Soon’, cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:#7D7DFF; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

  • After pasting it search for </body>
  • Now paste the following code given bellow above </body>

<script type=’text/javascript’>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script><script src=’http://triposoft.googlecode.com/svn/roundpagenavigation.js’ type=’text/javascript’/>

  • Now save your Template.
  • Enjoy!
If you like this article please share this with your friends and subscribe to get many free tips and tricks via email for free.If you have any tips and tricks means share it with us through Guest Posting at Triposoft.
About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.