How To Add Page Navigation To Blogger Blog - My Blogger Market

Breaking

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

12/02/2013

How To Add Page Navigation To Blogger Blog

After my previous artilces about How to change head image on reload on blogger blog today i am going to share how to add beautiful page navigation to blogger blog in simple step and ways.




Adding Page Navigation:

  • Go to blogger dasboard
  • Layout >> Add a Gadget >> Html/Javascript
  • Paste and following codes

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://tonyisright.blogspot.com" style="font-size:0pt">Grab This!</a>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>


  • Now Save.
You have done if you need any help about this widget please comment below will comments will highly appreciate.Thanks and stay tuned!

No comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Post Top Ad

Responsive Ads Here