Beautiful Page Navigation Widget for Blogger/Blogspot

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.

1. Login To Your Blogger And Go To Template Section
2. Then Click On Edit/Html(Proceed)
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/AVvXsEgEG4ho_qllJ21g_6ON22QIWNZvn1hivi0bPPboWDNi1LU1Np4ay6PPu6RTkv5wGASVSpKQD5gNOoiIdvmbornVMbKi039x-QtbiYbBS2EIhHtwsNsmRWEDjyi7aa886IqIJVxKBARMpqLZ/) 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/AVvXsEg2SJSpSlFBRwAE8t1wQm4v0JDjr-BbYDrRf1VRMFlLDWQOir_yApD1a04xcvxk823xY08q_klwd9WotN9JDnpbBqglJjWkpN0qx5E3U_ipoR8uI8lR6tEEync7LTlDy3FwXS6v1HUmfLXY/) 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/AVvXsEg2SJSpSlFBRwAE8t1wQm4v0JDjr-BbYDrRf1VRMFlLDWQOir_yApD1a04xcvxk823xY08q_klwd9WotN9JDnpbBqglJjWkpN0qx5E3U_ipoR8uI8lR6tEEync7LTlDy3FwXS6v1HUmfLXY/) no-repeat 0 100%;color : #fff;}
       .showpagePoint {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2SJSpSlFBRwAE8t1wQm4v0JDjr-BbYDrRf1VRMFlLDWQOir_yApD1a04xcvxk823xY08q_klwd9WotN9JDnpbBqglJjWkpN0qx5E3U_ipoR8uI8lR6tEEync7LTlDy3FwXS6v1HUmfLXY/) 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"/>

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