Awesome Page Navigation for Blogger

Page Navigation is Awesome widget, and that will replace older link, home link and newer link with number mod style in home page and post page. Have you seen default blogger older, home and newer links are boring feel.You can get page navigation in almost every website which give you tutorial about blogging. But all the sites confer the same style page navigation, but, here i would like to share awesome style navigation with CSS. Just adding CSS and HTML code in template.

Live Demo Home Page    Live Demo Post Page

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>

5. Now the CSS. Find ]]></b:skin> and copy the below code and paste before the 

]]></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;
}

6. huhh!!!!. Done, click SAVE TEMPLATE and If you have any doubt, drop your comment below.

SHARE

Tweet