How to add Number Page Navigation widget in BlogSpot/blogger blog?(সহজ ভাবে আপনার ব্লকে যুক্ত পেজ নম্বার )

Add this Number Page Navigation widget to your blogger blog

You can add this widget in your blogger blog by following our three simple steps bellow.

Step 1:

• Go to Blogger Dashboard>> Template>> Edit html
• Press Ctrl + F and search the code shown below
• Paste given code before the above line. 

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

• 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 type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script>

<div class='clear'/>
</div>
</b:includable>

Step 2:

• Now Find This Code

<b:include name='nextprev'/>

And Replace <b:include name='nextprev'/>  code with code shown below.

<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>

Step 3:

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

• 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: #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;

}

ভালো লাগলে একবার যেতে পারেন আমার ব্লগ . ইচ্ছা করলে আমাকে ফেসবুক এ আপনার ফ্রেন্ড করে নিতে পারেন আমার ফেসবুক