How To Add Cool Numbered Page Navigation

How To Add Cool Black Numbered Page Navigation Widget to Blogger





1.Login to your blogger dashboard and go to Desing --&-- Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJNxDPBJ5EvZInKnIrieiPCyQ12nSsZSSYFz5zPGEkq9UafZA6JvUeE9NFwc0sPSMvFPFjMUbrQO1WQBZmYKCuXOc-6_72Ze3PsJB6BO6en0tdMiraulkrGIV2GiaDtJ6jWYppAwgDV0/s1600/wp4.jpg) 0 -25px repeat-x}.showpageNum a:hover{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #999;background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJNxDPBJ5EvZInKnIrieiPCyQ12nSsZSSYFz5zPGEkq9UafZA6JvUeE9NFwc0sPSMvFPFjMUbrQO1WQBZmYKCuXOc-6_72Ze3PsJB6BO6en0tdMiraulkrGIV2GiaDtJ6jWYppAwgDV0/s1600/wp4.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJNxDPBJ5EvZInKnIrieiPCyQ12nSsZSSYFz5zPGEkq9UafZA6JvUeE9NFwc0sPSMvFPFjMUbrQO1WQBZmYKCuXOc-6_72Ze3PsJB6BO6en0tdMiraulkrGIV2GiaDtJ6jWYppAwgDV0/s1600/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style> 
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://sitemaphendrytha.googlecode.com/files/hendrytha-nextpage.js'></script>

4.Now save your "HTMl JavaScript" and refresh your blog.