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='/';
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script><script src=’http://triposoft.googlecode.com/svn/roundpagenavigation.js’ type=’text/javascript’/>
- Now save your Template.
- Enjoy!