How to add Number Page Navigation Widget in Blogger ~ Cool Blogger Tricks

How to add Number Page Navigation Widget in Blogger

In blogger blog, older post or newer post link is not SEO friendly for blog and I am sharing a page navigation for blogger. Page navigation for blogger is very good and changed your blog look to professional. I am sharing a beautiful attractive and stylish number page navigation for blogger. You just add some code to your blogger template and change the blog look to professional. So lets start adding number page navigation in blogger.

Features of page navigation :

High page speed
Built with CSS3 and HTML5
Easy to install
Stylish Hover Effect
Beautiful look
Responsive
Support all browsers
Mobile friendly

How to add Number Page Navigation Widget in Blogger :

go to blogger dashboard

Template >> Edit HTML

Search the following code in your template

]]></b:skin>

And add the following piece of code above this code.

/* Pagination by CBT */
#showpageArea {
margin:0;
padding:0;
}
.showpageArea a {
font-family: ‘Oswald’, sans-serif;
font-size:14px;
font-weight:normal;
text-decoration:none;
}
.showpageNum a {
font-family: ‘Oswald’, sans-serif;
background:#eee;
font-size:16px;
font-weight:normal;
text-decoration:none;
border:1px solid #ccc;margin:0 3px 0 0;padding:5px 10px;color:#474747;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
.showpageNum a:hover {
border:1px solid #1573A3;
background-color:#2288bb;
color:#fff;
}
.showpagePoint {
font-family: ‘Oswald’, sans-serif;
border:1px solid #1573A3;
background-color:#2288bb;
color:#fff;font-size:16px;
font-weight:normal;
text-decoration:none;
margin:0 3px 0 0;
padding:5px 10px;
}
.showpageOf {
font-family: ‘Oswald’, sans-serif;
display:none;
font-size:16px;
font-weight:normal;
text-decoration:none;
padding:5px 10px;margin: 0 3px 0 0;
color: #ccc;
text-transform:none;
}
.showpage a {
font-family: ‘Oswald’, sans-serif;
border:1px solid #ccc;
background-color:#eee;
color:#474747;
font-size:16px;
font-weight:normal;
text-decoration:none;
padding:5px 10px;
margin: 0 3px 0 0;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.showpage a:hover {
border:1px solid #1573A3;
background-color:#2288bb;
color:#fff;
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
}

Now find </body> tag in your template add the following code above it.

<!–Page Navigation Starts–>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!–Page Navigation Ends –>