Best 3 Style CSS Page Navigation Widget For Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can find out Latest and Stylish 3 type of Page Navigation widget For Blogger. Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different color styles. Page Navigation is an awesome widget that enables page number navigation to visits. 

Page Navigation is a really awesome and long awaited feature. It really was an awesome trick that was made at a time when nobody could even think of implementing it on a blogger. When you use this hack, you will see this kind of navigation on your blog's home page and label pages.


  • Simple with 3 Stylish Design
  • Page Counter
  • Next and Previous Buttons Included
How to Add in Blogger Blogspot

Step 01. Go to Your Blogger Blog

Step  02. Click on Template Settings

Step 03. Go to HTML

Step 04. Click on Edit HTML button

Step 05. Check on Expand Widget Template

Step 06. Now do As I Did

Step 07. Find this Line Using (CTRL+F) Function

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>

Edit Below code with your Data in Blue Numbers and Add After it.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
<script type="text/javascript" src=""></script>
<div class="clear" />

Step 08.  Next Find the Below Line Using (CTRL+F) Function

      <!– navigation –>
<b:include name=’nextprev’/>

Step 09. Now Replace it with the given below code

<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">
Step 10. Next find the below line using CTRL+F


Final Choose Any One style and insert the corresponding CSS Code Above it.

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { padding:4px 7px;margin-right:2px;font-size:11px;color:#555;background:#e8e8e8;border:solid 1px #ccc;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}
.pagenavi .pages{display:none} 
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a {border: 1px solid #BFBFBF;padding: 3px 6px;margin: 2px;font-size:11px;color:#4a77ae;background:#e8e8e8;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px; }
.pagenavi a:hover,.pagenavi .current{color:#000;background:#f6f6f6;border: 1px solid #ccc;text-decoration:none;}
Finally Save your template and you can all don!

I Hope this article is really helpful for you. If you like this article so please share it with your friends on social media.