Add Numbered Page Navigation Widget For Blogger Blogspot

Muji 7:30 AM

In blogger, by default, you see Older posts, and Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is so many people hardly notice those newer and older posts links, which absolutely means less page views to your blog.

So in order to increase to your blog page views you can use this cool looking, advanced numbered page navigation to your blog.

Standard page navigation on blog is “Newer Posts, Older Posts and Home ”. To create page navigation number like shown below your blog is very easy.

Step 1: Go to Your Blogger Dashboard --> Layout --> Add A Gadget --> Choose A Html/Javascript Gadget --> Copy Paste The Following Code

<style> .showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}</style>
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Also Read: How To Set Up A Custom Domain With Godaddy In Blogger - A Step By Step Procedure 

Step 2: Now save the code and visit back your website to see the widget in action. Still if you have any doubt feel free to use comment box right below.