Wednesday, June 06, 2012

Add Best Numbered Page Navigation (page-nav) to Blogger blogs

Posted On 0 comments Follow us on twitter
numbered page navigation (pagenav) for blogger


Just like other blogger hacks here is another hack for blogger / blogspot blogs, this hack replaces older posts and newer posts links with numbered pagenav after blog posts which allows users to easily navigate to any page around your blog (in archive and index pages). This is old hack but has redesigned many times. In this hack css 3 style used in page nav is by Web-Gate at Css Deck and javascript for Pagination for blogger / blogspot blogs is by Rilwis of deluxe blog tips, now looks great than previous one.

How to add numbered navigation to Blogger / Blogspot blogs

Follow below steps to add pagenav to blogger / blogspot blogs.

Step 1. Login to your Blogger dashboard.
Step 2. Go to Template from the drop-down menu of your blog from dashboard.
Step 3. Click Edit HTML.
Step 4. After that you will see a warning about editing template click proceed to ignore warning.
Step 5. Check "Expand Widget Templates" box.

Step 6. Find in your template (press ctrl + f to search). just above paste below code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:else/>

<style>.pagenavi{position:relative;display:block;width:400px;height:40px;overflow:visible;margin:50px auto;border:10px solid rgba(255,255,255,0.5);-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;-webkit-box-shadow:inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;-moz-box-shadow:inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;box-shadow:inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;}

.pagenavi span,.pagenavi a{font:bold 20px/30px Tahoma,Arial;cursor:pointer;text-decoration:none;color:#464646;display:block;float:left;margin-left:2px;-webkit-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,rgba(0,0,0,0.3) 0 3px 0;-moz-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,rgba(0,0,0,0.3) 0 3px 0;box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,rgba(0,0,0,0.3) 0 3px 0;padding:2px 10px;min-width:10px;text-align:center;position:relative;text-shadow:#fff 0 1px 0;background:#cdcdcd;background:-webkit-gradient(linear,0% 0,0% 100%,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9)));background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9)));background:-webkit-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9));background:-moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9));background:-o-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9));background:linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9));}.pagenavi a:after{content:'';position:absolute;bottom:-3px;height:100%;display:block;width:100%;left:0;-webkit-box-shadow:inset rgba(255,255,255,0.2) 1px 0 0,inset rgba(255,255,255,0.2) -1px 0 0,rgba(0,0,0,0.4) 0 1px 0;-moz-box-shadow:inset rgba(255,255,255,0.2) 1px 0 0,inset rgba(255,255,255,0.2) -1px 0 0,rgba(0,0,0,0.4) 0 1px 0;box-shadow:inset rgba(255,255,255,0.2) 1px 0 0,inset rgba(255,255,255,0.2) -1px 0 0,rgba(0,0,0,0.4) 0 1px 0;}.pagenavi a:first-child::after{-webkit-border-radius:500px 0 0 500px;-moz-border-radius:500px 0 0 500px;border-radius:500px 0 0 500px;}.pagenavi a:last-child::after{-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;}.pagenavi a.current:after{height:1px;bottom:-1px;}.pagenavi a:before{content:'';position:absolute;top:1px;height:100%;-webkit-box-shadow:rgba(0,0,0,0.4) 0 3px 0;-moz-box-shadow:rgba(0,0,0,0.4) 0 3px 0;box-shadow:rgba(0,0,0,0.4) 0 3px 0;width:1px;display:block;background:rgba(0,0,0,0.4);right:-1px;}.pagenavi a:last-child::before{display:none!important;}.pagenavi a:first-child{-webkit-border-radius:50px 0 0 50px;-moz-border-radius:50px 0 0 50px;border-radius:50px 0 0 50px;font-family:'WebSymbolsRegular';}.pagenavi a:last-child{-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;font-family:'WebSymbolsRegular';}.pagenavi a:hover{-webkit-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,inset rgba(255,255,255,1) 0 0 15px,rgba(0,0,0,0.2) 0 3px 0;-moz-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,inset rgba(255,255,255,1) 0 0 15px,rgba(0,0,0,0.2) 0 3px 0;box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,inset rgba(255,255,255,1) 0 0 15px,rgba(0,0,0,0.2) 0 3px 0;}.pagenavi a:active{-webkit-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.2) 1px 0 0,inset rgba(0,0,0,0.2) -1px 0 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.2) 0 2px 0;-moz-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.2) 1px 0 0,inset rgba(0,0,0,0.2) -1px 0 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.2) 0 2px 0;box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.2) 1px 0 0,inset rgba(0,0,0,0.2) -1px 0 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.2) 0 2px 0;top:1px;text-shadow:#fff 0 0 15px;}.pagenavi a:active:after{bottom:-2px;}.pagenavi a:active:before{-webkit-box-shadow:rgba(0,0,0,0.4) 0 3px 0;-moz-box-shadow:rgba(0,0,0,0.4) 0 3px 0;box-shadow:rgba(0,0,0,0.4) 0 3px 0;top:0;}.pagenavi a.current{-webkit-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.3) 1px 0 0,inset rgba(0,0,0,0.3) -1px 0 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.3) 0 1px 0;-moz-box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.3) 1px 0 0,inset rgba(0,0,0,0.3) -1px 0 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.3) 0 1px 0;box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.3) 1px 0 0,inset rgba(0,0,0,0.3) -1px 0 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.3) 0 1px 0;top:2px;text-shadow:#fff 0 0 15px;}.pagenavi a.current:before{-webkit-box-shadow:rgba(0,0,0,0.4) 0 3px 0;-moz-box-shadow:rgba(0,0,0,0.4) 0 3px 0;box-shadow:rgba(0,0,0,0.4) 0 3px 0;top:-1px;}.pagenavi a.current:active:after{bottom:-1px;}</style>

</b:if>

Step 7. After that you need to add JavaScript, find:

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

and add below code after code listed above:

<b:includable id='page-navi'>

<div class="pagenavi">

<script type="text/javascript">

var pageNaviConf = {

perPage: 4, numPages: 6, firstText: "First", lastText: "Last", nextText: &quot;&#187;&quot;, prevText: &quot;&#171;&quot; }

</script>

<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>

<div class="clear" />

</div>

</b:includable>

Replace 4 with the number of post to show and 6 with nav pages (e.g 1 2 3 4 5 6) in above code.

Step 8. Find:

<!-- navigation -->

<b:include name='nextprev'/>

And replace above lines with below code:

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

Other Blogger hacks

How To Add Breadcrumb Navigation To Blogger Blogs.
Replace Older and Newer post links with post title in Blogger.

Credit

Credit for CSS goes to Web-gate, credit for Pagination for blogger goes to Rilwis, credit for further composition goes to Paul Santosh of BloggerBin.

Post Source: The Best Numbered Page Navigation Ever For Blogger.

0 comments:

Post a Comment