Beautiful Page Navigation For Blogger [iBloggr Master Style]

 

Beautiful Page Navigation For Blogger 

Page numbered navigation widget for blogger is very beautiful widget to navigate blogger's blog pages very easily.All navigation widgets are based on JavaScript (this also). you can use this widget very easily and simple installation then others.

 Installation :

1 )  Go to Edit HTML

2 ) Search for </body> Tag

3 ) Add Below Code Before The Tag


<style type="text/css"> .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;} .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddLo-ckc2HqyjaHgQndch2OO2m6jAolYAkynfNTOhZ_nUOEe4QupWjAabKD6cumqUD0MHMMpnoue6jnp0iT9OvpkL23_XiBF8h1vQQnD170vipQkhMnCG-3MVxL59T1kM3wBV2LBtamgS/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdsiENy1IiC5-SFy4U77jOaMJFAcWNXpYuZLRVN-XeJzmz-KppJ8dHUSTz8tei92osp2tl-EWYJWrAkDZmc6E3fDse_tjFg_YuEDqPPcMpbVRyhoPLpB6oxcGo0hibAALlfzb7LbyMFip/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdsiENy1IiC5-SFy4U77jOaMJFAcWNXpYuZLRVN-XeJzmz-KppJ8dHUSTz8tei92osp2tl-EWYJWrAkDZmc6E3fDse_tjFg_YuEDqPPcMpbVRyhoPLpB6oxcGo0hibAALlfzb7LbyMFip/) no-repeat 0 100%;color : #fff;} .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdsiENy1IiC5-SFy4U77jOaMJFAcWNXpYuZLRVN-XeJzmz-KppJ8dHUSTz8tei92osp2tl-EWYJWrAkDZmc6E3fDse_tjFg_YuEDqPPcMpbVRyhoPLpB6oxcGo0hibAALlfzb7LbyMFip/) 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"/>

 After This Add The Widget to your blog by Click on Below button.