Play games and win money : Numbered Page Navigation For Blogger With Css Hover Effect

Sunday, July 8, 2018

Numbered Page Navigation For Blogger With Css Hover Effect

This is awesome page navigation for blogger with Css hover effect even I am also using this widget for my blog you can see this at last of my blog.

This only dont add numbered but i also modify post older,home and newer links.

To add this widget to your blog follow below steps-

1. Go to Design > Edit HTML > Check mark Expand Widget Templates and Find Below code.

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

2. 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 src=http://awesome-navigation.googlecode.com/files/onlinetrick.js type=text/javascript/>
<div class=clear/>
</div>
</b:includable>

Customize
perpage : How many posts per page you want to display. You can change 7 (in blue color)
numpage : How many number will show in your page Navigation. You can change 5 (in red color)
3. Once again find the below code.

<b:include name=nextprev/>

4. Replace above code with following code.

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

5. Now the CSS. Find ]]></b:skin> and 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: #e06666;
     -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: #e06666;
}

6. huhh!!!!. Done, click SAVE TEMPLATE and If you have any doubt, drop your comment below.

visit link download