We Post only the Best Stuff

Numbered Page Navigation in Blogger with CSS and JAVASCRIPT 2013

Page Navigation facilitates visitors to explore our blog and view page per page. Blogger did not facilitate page navigation. Page Navigation is a really awesome and long awaited Hack. Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger. It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger. It had some minor bugs and now I have perfected it and given all the perfect page navigation solution.
The hack is simple and a simple widget based and includes no template editing as it is included in many of the numbered page navigations of many sites.

How to achieve numbered Page Navigation in Blogger?

Go to Blogger –> Blog –> Layout –> Add Gadget –> HTML/JavaScript
Now Copy and Paste the code given below to the above HTML Widget
<!-- Stylish Colored Page Navigation Widget For Blogger By Tech Jatt @ http://www.techjatt.tk --><style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Nitin @ http://www.TechJatt.tk -->
and Voila!  You are Done.
Feel free to edit this coding and change the first 5 to the no. of posts displayed by you per page. Change second 5 to the no. of pages icons to be displayed next to current page. Change Prev to anything you want to show for previous page and Next to anything you want to show for next page. You may also modify the color theme by changing the Hex Codes if you want to customise this navigation,
NOTE: Please keep the links intact i.e. don’t delete the link http://www.techjatt.tk to keep the word and credits. The link will not in any way disturb your blog.
If you are stuck at anything, feel free to ask in comments. If you find this helpful, then please take a minute to like and share it with others on social media or like or +1 or share via sharing icons on top of this article :)
Keep visiting for further Hacks and Tweaks





Support : Contact Us | Privacy Policy | Site Map
Copyright © 2013. Tech Jatt - All Rights Reserved
Site Design by Nitin Kundu Licensed to Tech Jatt
Proudly powered by Blogger