Beautiful Numbered Page Navigation Widget for Blogger

Beautiful Numbered Page Navigation Widget for Blogger

>

One of the important features of a good blog or site is that it is very easy for the blog visitors to navigate throughout the site. A site which is structured in such a way that the visitors have to take efforts to move from one page to another is seen as a poorly designed site.

Having proper navigation is important as it also helps to increase the page views for your blog. Blogger users are aware of the Newer Posts and Older Posts links at the bottom of the blog.

How To Install This Widget On Blogger?

Please Sign-In to Blogger before creating the Gadget.

Manual Installation :-

1. Login To Your Blogger And Go To Design Section
2. Then Click On Edit/Html
3. Now search for </body> tag and copy/paste the below codes before/above 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/AVvXsEifS-Wa9gmVfFUode4MmQ7VJaLWBz7lwcnfS_DMKRpgRX72kg_hSPr22Nq4aEcErnSqSc7QpDSoLl-f2pKh_5c61FhssSs1PAAa6phPbX-6H4MVueLEyX-NprP-uSbR18XNtA01kv2lgfzB/) 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/AVvXsEjI2_5m5wUcTwGeVA-wIRJ38PijRpJIk2xQWcF2tERSPs1u0BNzNGygcQ0zMEEdsru6FecQGbMenI-TR_BJUywEyOtWzbUDjLadlqs8vqZLUwEe2ZVvsY_vMjZZNNiE7zatmkGyd4w-9XhG/) 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/AVvXsEjI2_5m5wUcTwGeVA-wIRJ38PijRpJIk2xQWcF2tERSPs1u0BNzNGygcQ0zMEEdsru6FecQGbMenI-TR_BJUywEyOtWzbUDjLadlqs8vqZLUwEe2ZVvsY_vMjZZNNiE7zatmkGyd4w-9XhG/) no-repeat 0 100%;color : #fff;}
    .showpagePoint {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2_5m5wUcTwGeVA-wIRJ38PijRpJIk2xQWcF2tERSPs1u0BNzNGygcQ0zMEEdsru6FecQGbMenI-TR_BJUywEyOtWzbUDjLadlqs8vqZLUwEe2ZVvsY_vMjZZNNiE7zatmkGyd4w-9XhG/) 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"/>

4. Save.

There are some customizable parameters in this code