How To Add Numbered Page Navigation For Blogger With CSS Hover Effect

Today I am going to tell How To Add Numbered Page Navigation For Blogger Blog With CSS Hover Effect. One Week Ago I Shared The Best Numbered Page Navigation Ever For Blogger. The default navigation links (i.e Older Posts) are not visitor friendly if you are having a large amount of posts and readers.

Few bloggers has some problems with previous Page Navigation script. Now here is a completely new and working script for Numbered Page Navigation (i.e. Panigation) for Blogger Blogs. The pagination widget for blogger make it simple for your readers. This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting (1, 2, 3, 4, 5….) like those of a book.

How To Add Numbered Page Navigation For Blogger With CSS Hover Effect

• Go To Blogger Dashboard >> Template
• Backup Your Blog Template
• Tick The Box "Expand widgets templates"
• Search </b:skin> Code In Your Blog Template
• Copy and Paste Given Code Above </b:skin>

.pagenavi span, .pagenavi a {display: inline-block;padding: 0px 9px;margin-right: 4px;border-radius: 3px;border: solid 2px #EA6D4A;background: -moz-linear-gradient(#444, #333);background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#333),color-stop(1, #444));background: -webkit-linear-gradient(#444, #333);background: -o-linear-gradient(#444, #333);background: -ms-linear-gradient(#444, #333);background: linear-gradient(#444, #333);-moz-box-shadow: 0 -1px rgba(255,255,255,.3);-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);box-shadow: 0 -1px 0 rgba(255,255,255,.3);font-size: .875em;font-weight: bold;text-decoration: none;color: #EA6D4A;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.pagenavi span:hover,.pagenavi a:hover {background: -moz-linear-gradient(#ee8a6e, #EA6D4A);background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#EA6D4A),color-stop(1, #ee8a6e));background: -webkit-linear-gradient(#ee8a6e, #EA6D4A);background: -o-linear-gradient(#ee8a6e, #EA6D4A);background: -ms-linear-gradient(#ee8a6e, #EA6D4A);background: linear-gradient(#ee8a6e, #EA6D4A);-moz-box-shadow: 0 -1px rgba(255,255,255,.3);-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);box-shadow: 0 -1px 0 rgba(255,255,255,.3);color: #333;border: solid 2px #333;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.pagenavi a.current {border: none;background: #616161;box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);color: #f0f0f0;text-shadow: 0px 0px 3px rgba(0,0,0, .5);}

• Now Look For The Below Line

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

• Paste The Below Coding Just After The Above Line

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

• Find Below Line

<b:include name='nextprev'/>

• And Replace It With The Below Coding

<b:if cond='data:blog.pageType == "index"'><b:include name='page-navi' /><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi' /></b:if></b:if> 

Now, Save your blogger template and its all done. For any problems in this widget just comment below and I will provide you with the solution.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.