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

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>
  • Now Look For The Below Line
  • Paste The Below Coding Just After The Above Line
  • Find Below Line
  • And Replace It With The Below Coding

.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);}

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

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

<b:include name=’nextprev’/>

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

The Best Numbered Page Navigation Ever For BloggerAuthor – comment below

Subscribe
Subscribe