Add Page Navigation Widget for Blogger/Blogspot

Page numbered navigation widget for blogger is  COOL widget to navigate blogspot pages very easely and looking feel good. All navigation widgets are based on JavaScript (this also)...........

. you can use this widget very easily and simple installation then others.

 Steps:

1. Login To Your Blogger And Go To Design Section
2. Then Click On Edit/Html
3. Now search for </body> and place the below codes before it.

Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code  

<style type="text/css">
    .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
    .showpage a {float:left;background:url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUG2pSP7jLiKn6Ed1iri6pDxQ3drZsTZkgUg0B0G-1V_6kglRWbswIYYpAM5D69nq1aJBXjWsPll1tYtcP-HJOWibwFF__UdgFx-wzcSFx0ahOxsNv9QAi24vEGj7LXYHuRo-MnBj0V3GV/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
    .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
    .showpageOf{float:left;padding-top : 6px;}
    .showpageNum a {background:url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho1YG8WwwzqVoGVQL2EsKpc1e0SpKdPf15LR1HQHEuoEBfW5eT6g-gGaakh9Onr4qvFX-dO8-KcRkyGHjpMLj_oeC_umUiNyFAP67glQCjcxUN1iiiL_smcbxmZHAp0fmXfF2G6N5O7j-A/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
    .showpageNum a:hover {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho1YG8WwwzqVoGVQL2EsKpc1e0SpKdPf15LR1HQHEuoEBfW5eT6g-gGaakh9Onr4qvFX-dO8-KcRkyGHjpMLj_oeC_umUiNyFAP67glQCjcxUN1iiiL_smcbxmZHAp0fmXfF2G6N5O7j-A/) no-repeat 0 100%;color : #fff;}
    .showpagePoint {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho1YG8WwwzqVoGVQL2EsKpc1e0SpKdPf15LR1HQHEuoEBfW5eT6g-gGaakh9Onr4qvFX-dO8-KcRkyGHjpMLj_oeC_umUiNyFAP67glQCjcxUN1iiiL_smcbxmZHAp0fmXfF2G6N5O7j-A/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
    .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=1;
var upPageWord="Previous";
var downPageWord="Next";
</script>
<script type='text/javascript' src="http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js"/>

  Code Code Code Code Code Code Code Code Code Code Code Code Code Code Code 


#var pageCount=5; ~ Number of posts per page

5. Save template and Check your Blog

                             Thanks

Posted in: Blog, Blogger tricks