Place Your Ads Here 460x68 ads

Stylish Page Navigation Widget For Blog



Pagination Functionality can increase your website or blog's traffic. After tested many Page Navigation Widgets, I found the best one from Deluxe Blog Tips , I say "the best" because :
- It is easy to custom CSS, make it like Wordpress's Page-Navi plugin
- Easy to install to your blog
- Fast, stable and no bugs (if you install it the right way, of course!)

Edit HTML, find this line:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>



Insert after it:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 3,
numPages: 3,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://sites.google.com/site/noctblogsite/script/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

In which:
- perPage: number of posts are shown in each page
- numPages: number of pages are shown in page navigation
- firstText, lastText, nextText, prevText: simply the "First", "Last", "Next", "Prev" text


Next, find the line:
<!-- navigation -->
<b:include name='nextprev'/>

Replace it with:
<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:include>
</b:if></b:else></b:include></b:if>

Final, choose a style, and insert the corresponding CSS code above</b:skin>

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



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thank you so much for putting this list together for us. This post is very inspirational and motivating.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...