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/AVvXsEgZgNT3AIM7T3HccYHLLvqvdU62uIU0b8X5czdIi6QHX2GrPB5xVKdHMKiT4iXAkRlk8GNzfkMPM6QMyCdg1ASqKb06B_mmsz2Teajz4b9XzRhcUZOMptcmILCdUpl90uw_4RueOrjO-pbH/) 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/AVvXsEjkJ2yzyv39cSqUrK7KeSCvdzoNOWSkrO9MbDwb1uLPWiCEMAuPPWOmpuphlw4FPILoBBRuHT47vCCbgc2-OhRHJi37mNF2GytfOjvhUoap0pepfG5J_GtxL797siXQHcK_Emh3XxQp8aYO/) 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/AVvXsEjkJ2yzyv39cSqUrK7KeSCvdzoNOWSkrO9MbDwb1uLPWiCEMAuPPWOmpuphlw4FPILoBBRuHT47vCCbgc2-OhRHJi37mNF2GytfOjvhUoap0pepfG5J_GtxL797siXQHcK_Emh3XxQp8aYO/) no-repeat 0 100%;color : #fff;}
    .showpagePoint {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJ2yzyv39cSqUrK7KeSCvdzoNOWSkrO9MbDwb1uLPWiCEMAuPPWOmpuphlw4FPILoBBRuHT47vCCbgc2-OhRHJi37mNF2GytfOjvhUoap0pepfG5J_GtxL797siXQHcK_Emh3XxQp8aYO/) 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

var pageCount=5;

Blogger Tutorials, Blogger Widgets

• How change Blogger background color
• How to set Google language option (esp for expats)
• How To Reset Blogger custom domain to blogspot sub-domain
• How to insert or Add AddThis Welcome Bar to Blogger
• How To Give Your Mouse Cursor A Bubble Effect
• How To Add Multi-Colored Popular Posts Widget For Blogger
• Adding SCM Music Player To Run Audio On Your Blog
• Do You Like This Story Widget For Blogger
• Animated gif image How to change size and insert Animated gif image in blogger
• How to redirect blogger blog to blogspot.com address