Breaking News
Loading ...
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 ;)

  1. Go to Blogger Dashborad
  2. Click on the blog that you want to change
  3. Goto Design Tab Followed by Page Element
  4. Then Click on the Add a Gadget
  5. 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:

Anonymous said...

Thanks for sharing, Keep sharing i got it now :)

Unknown said...

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