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.
 Let see...

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%;
}
.showpageArea a {
float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBBIORVvcrjpzsqVP65kUzqESsLrySBursQ_66-63QHzGSN85brVw8M9UJQMLQI7V2j2wKB9HMtxFg8b6YMcgqt8dP3Sa6sx5_snZmbobRulZ5j3_2cIolrxjcN1mezhIRi85pqY9tZiT/) no-repeat 0 0;
text-align : center;
width : 127px;
height : 42px;
text-align : center;
display : block;
margin : 0 5px;
color : #333;
padding-top : 6px;
}
.showpageArea 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/AVvXsEglIzs3mdouFoC263FvyI966XBdpd5ckSEeX3GUy7fZM9DymaMAXKTS202DZTuzklCEg1xqZ7dKM_fVSdZnnZcppJUwYBMaJUVztMb0OU9f5oMOcu69qvOhwvAxxOqdm_DpKZsZCJMG3Cpw/) 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/AVvXsEglIzs3mdouFoC263FvyI966XBdpd5ckSEeX3GUy7fZM9DymaMAXKTS202DZTuzklCEg1xqZ7dKM_fVSdZnnZcppJUwYBMaJUVztMb0OU9f5oMOcu69qvOhwvAxxOqdm_DpKZsZCJMG3Cpw/) no-repeat 0 100%;
color : #fff;
}
.showpagePoint {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIzs3mdouFoC263FvyI966XBdpd5ckSEeX3GUy7fZM9DymaMAXKTS202DZTuzklCEg1xqZ7dKM_fVSdZnnZcppJUwYBMaJUVztMb0OU9f5oMOcu69qvOhwvAxxOqdm_DpKZsZCJMG3Cpw/) 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=3;
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
Save template and Check your Blog



#Want any Help or difficult to installing widget can surely contact me via Comments.




You can also see Adding Numbered Page Navigation Bar For Blogger
and Add Different 5 Stylish Numbered Page Navigation To BlogSpot Blog.


If you face any problem in this post please let me know your problem. To inform your problem you can leave a comment below. And if you like my post please click the Facebook like button or spread this post by clicking the Twitter, Facebook etc. icons below. Because, it will be a great support for me.