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.
Facebook Comments

Speak Your Mind

*

CommentLuv badge