Blogger Tips

Page Navigation is awesome widget,and that will replace older posts to page navigation home link and newer link with number mod style in home page and post page.So follow the steps given below and have fun using this free page navigation for blogger.

How To Add Awesome Page Navigation in blogger

1. Go to Design > Edit HTML > Check mark Expand Widget Templates and Find Below code.

<b:includable id='mobile-index-post' var='post'>

2. Paste below code before the above line.


<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' 

type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

Customize

perpage : How many posts per page you want to display. You can change 7 (in blue color)

numpage : How many number will show in your page Navigation. You can change 5 (in red color)

3. Once again find the below code.


<b:include name='nextprev'/>
 

4. Replace above code with following code.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

]]></b:skin>.
#blog-pager, .pagenavi {      clear: both;      text-align: center;      margin: 30px auto 10px; } #blog-pager a, .pagenavi span, .pagenavi a {      margin: 0 5px 0 0;      padding: 2px 10px 3px;      text-decoration: none;      color: #fff;      background: #e06666;      -moz-border-radius: 2px;      -khtml-border-radius: 2px;      -webkit-border-radius: 2px;      border-radius: 2px;      -webkit-transition: all .3s ease-in;      -moz-transition: all .3s ease-in;      -o-transition: all .3s ease-in;      transition: all .3s ease-in; } #blog-pager a:visited, .pagenavi a:visited {      color: #fff; } #blog-pager a:hover, .pagenavi a:hover {      color: #fff;      text-decoration: none;      background: #000; } #blog-pager-older-link, #blog-pager-newer-link {      float: none; } .pagenavi .current {      color: #fff;      text-decoration: none;      background: #000; } .pagenavi .pages, .pagenavi .current {      font-weight: bold; } .pagenavi .pages {      color: #fff;      background: #e06666; }