How to Increase Number Page Navigation widget Blogspot / Blogger blog?

sajib shahik | 12:00 PM | 0 Comments

Many blogspot users / bloggers can find on Google, Bing, Yahoo or any other search engine page navigation widget. But they do not find any solution or they see many Page Navigation widgets do not work. Blogger / Blogspot users on this page to the navigation widget developed and modified for the MBT. If the implementation of the care and use this widget blgo you need to show it on your blog and also to complete the work. When you add this page navigation widget helps readers to jump from page to page to page or to a page where they want. It is a small button at the bottom of all the visitors can go directly to the last page. We use some of the cascading effects of this awesome page navigation widget. As the cascading effect hover. Even I also use this widget to your blog you will see this recent blog.

Follow these simple steps to increase the number of the Page NAVIGATION widget.

You can add this widget to only three steps.

Step 1

. Go to Blogger Dashboard
Select the drop-down menu and select the model
. Back up your template before making any changes on your blog
. Now Click on Edit HTML -> Run -> Expand Widget Templates
. Press Ctrl + F and find the code below
. Paste below code before the line.

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

* Paste below code before the line.

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 8,numPages: 5,firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;

<script type="text/javascript" src="


<div class='clear'/>

Step 2

*Now Find This Code
<b:include name='nextprev'/>

And replace <b:include name='nextprev'/> code in the code below.

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

Step 3

*Now Find ]]> </ b: skin>

*Copy the code below and paste before]]> </ 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: #2973FC;
-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: #2973FC;

Now Click Save Template and enjoy!

By sajib shahik
I am a professional Graphic designer and web site designer.I always try to make my byers Happy with my work and my activities. See My portfolio.....

Stay Connected With Us
Feed Icon Twitter Icon Facebook Icon Google+ Icon Youtube Icon

Share and Spread Share On Facebook +1 This Post Digg This Post Stumble This Post Tweet This Post Tweet This Post Tweet This Post Save Tis Post To Delicious Share On Reddit Bookmark On Technorati

Related Articles


Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it using Postify and then paste it in the comments