Page Navigation for Blogger - New script

Content is free. When you buy through links on my site, I may earn affiliate commission. Learn More.

Page navigation widget for blogger is the most popular widget, and most bloggers are using this. because these players are only provided in the WordPress blogs hosted or blogs. But now his trick has been made ​​available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization.

This Numbered Page Navigation will show the number of posts to jump from the main page and it's having previous and Next page buttons to move on

1. go to Blogger > Design > Page Elements

2. Add a Gadget and choose HTML/Java Script . Now simply copy the following code in it.

<!--Page Navigation Starts-->
<style type="text/css">

/* Page Navigation styles */
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #371DA1;
-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius: 5px;border-radius: 5px;
background: #fff;
line-height: 7em;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
color:#fff;
border:1px solid #6B6B6B;
background: #6B6B6B;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 1px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius: 5px;border-radius: 5px;
border:1px solid #371DA1;
background: #371DA1;
text-decoration: none;
}

</style>


<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='https://bloggerknown.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'></script>
<!--Page Navigation Ends -->

3. Submit and you are Done :)