Add Stylish Blogger Page Number Navigation Easily

05:58    1 comment

This is a nice  style page number navigation.Its circle navigation with stylish hover style.Im using java script for this code.you can make your blog attractive by adding this page number navigation.

  • Log in to blogger account and Go to Design >> Edit HTML
        (make sure backup your template first)
  • Find this tag by using Ctrl+F    ]]></b:skin>
  • Paste below code Before ]]></b:skin> tag




 .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:#069; 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:orange; 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:orange; 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;}

  • Now Find this code  by using Ctrl+F </body>
  • Paste below code Before </body> code

<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://bloggertrix.googlecode.com/files/pagenaviii.js' type='text/javascript'/>

  • Now save your template
     you are done. 

If you like it then Please Post Your Comments Here...
 

1 comments: