Next/Previous Page Navigation Button For Blogger

Customize Blogger Older post, Newer post widget to Next and Previous page button with numbers.

Screenshot

Goto your blogger blog >> Layout >> Add a Gadget >> HTML/JavaScript

Copy and Paste this code in blogger html/javascript gadget and save.

CODE:

<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:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfY-zTlzJHAGDSzb7aWzF4p_tgyu_GsmR7Xro_-FKlYw4Sqm-mKJGTU-kUdqF-jCNJ99x_ZOgKqrF8JK39KaVRe4avqSVvaMsnzPEtGazZ7j4amZ5Ee4jKIUKADFAc5LdyGn1GEDi_ntU/s1600/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfY-zTlzJHAGDSzb7aWzF4p_tgyu_GsmR7Xro_-FKlYw4Sqm-mKJGTU-kUdqF-jCNJ99x_ZOgKqrF8JK39KaVRe4avqSVvaMsnzPEtGazZ7j4amZ5Ee4jKIUKADFAc5LdyGn1GEDi_ntU/s1600/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfY-zTlzJHAGDSzb7aWzF4p_tgyu_GsmR7Xro_-FKlYw4Sqm-mKJGTU-kUdqF-jCNJ99x_ZOgKqrF8JK39KaVRe4avqSVvaMsnzPEtGazZ7j4amZ5Ee4jKIUKADFAc5LdyGn1GEDi_ntU/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none} </style> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript'>
var postperpage=8;
var numshowpage=2;
var upPageWord="Previous";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>