If you are not satisfied with Older Posts and Newer Posts in your Blogger and you want to change it to numbered page navigation then you can do it in 1 min.
To see the live demo of page navigation check my blog ;)
Change the background image here
You can change the numbers of posts per page.
Change the text you want to show instead of Prev Page and Next Page
Now Drag this widget at the bottom of the "Blog Posts" widget as we did in our previous post Add Share Buttons To Blogger
To see the live demo of page navigation check my blog ;)
- Go to Blogger Dashborad
- Click on the blog that you want to change
- Goto Design Tab Followed by Page Element
- Then Click on the Add a Gadget
- Select HTML gadget and paste the following code in it.
<!-------------sarakuj.com Page Navigation------------------>
<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:bold}.showpageNum a{color:#000;padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#f8b5a4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMaz-AuBYesxuZnNxTtOyBm5lJIKPFyEkhiLCCBCvy5p4AGVpKiVKKeDckIjLrLCnBNedRoolKN8eXyQZRuIHV5FSmEJMrqas-xnAHlE4g_BFQKifL_wGaPeK0TwgkEiFmTUmebdNoyL75/s1600/w2b_pagenav1.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7cac9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMaz-AuBYesxuZnNxTtOyBm5lJIKPFyEkhiLCCBCvy5p4AGVpKiVKKeDckIjLrLCnBNedRoolKN8eXyQZRuIHV5FSmEJMrqas-xnAHlE4g_BFQKifL_wGaPeK0TwgkEiFmTUmebdNoyL75/s1600/w2b_pagenav1.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#666;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f2f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMaz-AuBYesxuZnNxTtOyBm5lJIKPFyEkhiLCCBCvy5p4AGVpKiVKKeDckIjLrLCnBNedRoolKN8eXyQZRuIHV5FSmEJMrqas-xnAHlE4g_BFQKifL_wGaPeK0TwgkEiFmTUmebdNoyL75/s1600/w2b_pagenav1.png) 0 -5px repeat-x;text-decoration:none} </style>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev Page";
var downPageWord="Next Page";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://sarakuj.googlecode.com/files/pnavi.js'></script>
<!-------------sarakuj.com Page Navigation------------------>
Change the background image here
You can change the numbers of posts per page.
Change the text you want to show instead of Prev Page and Next Page
Now Drag this widget at the bottom of the "Blog Posts" widget as we did in our previous post Add Share Buttons To Blogger
2 replies so far:
Thanks for sharing, Keep sharing i got it now :)
I posted easiest method, another method is from edit html. But that one is bit difficult, thanx anyway
Post a Comment
So You've decided to leave a Comment, go ahead it takes only 5 sec