You may saw this navigation on wordpress and other amazing sites by now because of Abu Farhan you can also use this amazing navigation in blogger.So here we go with this quick tutorial :
Installation :
- Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :
- Just above ]]></b:skin> paste following css :
.showpageArea {
padding:10px;
}
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 5px;
padding:5px;
background:#fff;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#f0f0f0;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #f0f0f0;
margin:0 5px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 5px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:5px;
background:#fff;
}
.showpage a:hover {
text-decoration:none;
background:#f0f0f0;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
- Now search for </body> and just above it paste following script :
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.searchLabel'>
<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://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
</b:if>
<!--Page Navigation Ends -->
The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed on navigation widgets.
- Save it and enjoy :)
