Beautiful Page Navigation Widget for Blogger

Page numbered navigation widget for blogger is very beautiful 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.

Preview:-

Pages (6)Previous 234 Next

Install this:-

Generate Widget

Manual Installation:-

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.

   <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/AVvXsEgq6kS_Ha087UJHZ2w0fwZABoxyWQc2yY3A88YybkSJ9eTxHBifZ9H-0uBFVLg_Jc4fsSXHYO-jPwfLFtPELQScHVsUyYS5wCUzslyAPBDQib3adyylSSC6YS5rFg8tdvZGHHrY86IAUigI/) 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/AVvXsEg-g8IB7Zg4csRUrObjs4mvwuFAP_YMbir0N4UVDdaz4wOj893L5coHPbZunoClkl6BWF8h4avjb6i_8vroIj_ZCm-JjXaIidjuyf6AgyNbQ__pkvODgdikJHF8X8T9KaNib4S3p7Uw-HpC/) 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/AVvXsEg-g8IB7Zg4csRUrObjs4mvwuFAP_YMbir0N4UVDdaz4wOj893L5coHPbZunoClkl6BWF8h4avjb6i_8vroIj_ZCm-JjXaIidjuyf6AgyNbQ__pkvODgdikJHF8X8T9KaNib4S3p7Uw-HpC/) no-repeat 0 100%;color : #fff;}
       .showpagePoint {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-g8IB7Zg4csRUrObjs4mvwuFAP_YMbir0N4UVDdaz4wOj893L5coHPbZunoClkl6BWF8h4avjb6i_8vroIj_ZCm-JjXaIidjuyf6AgyNbQ__pkvODgdikJHF8X8T9KaNib4S3p7Uw-HpC/) 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://widgets.way2blogging.org/blogger-widgets/w2b-beautiful-pagenavi.js"/>

   #var pageCount=5; ~ Number of posts per page
4. Save template and Check your Blog

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here way2blogging.org and directly ask the developer of this Widget for the Solution by Commenting there.

---

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

---