Adding Page Numbered Navigation For Blogger


If you want to get lots of visitors on your blog then this is the must gadget for your blog because this page numbered navigation is webmaster friendly and helps you to increase your blog's visitor and increase your readers time on your blog.Readers love this gadget because it doesn't show the Older Post home Or Newer Post links below post it shows Numbered Navigation with Page counts.This time i really work hard for making this Gadget blog friendly, it means this Gadget don't want lots of Css and Lots of editing in your blog's HTML.

Just add some coding in your Blog and this awesome Page Numbered Navigation gadget is yours.

Adding Page Numbered Navigation For Blogger Blog's

Step 1.) Go to your blogger Dashboard Click > Design > Add A Gadget > Choose HTML Javascript from the Pop-up menu.


Step 2.) Copy the below code and paste it into the HTML/Javascript widget .
<a href='http://www.tekleisure.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TCzs1mWbyJZIHRijesLJzz0AClRnVlrCwMZyrvEY5xxaKEmnbtVEBbrIwvox54UY1ysFjlIJhwBvb7ZufDYerGxLSCah6qjWfK-_RVNeglWGjJagYezR0bQijc5pYO1-OsD8E-woq1Ql/s1600/best+blogger+tips.png'/></a><style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=10;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style='text/javascript' src='http://spiceupyourblogextras.googlecode.com/files/newbloggerpagenav.js'></script>

Important Note: I have set the posts count per page to 10 (Highlighted in Red color) you are free to increase or decrease the number of post shown on 1 page.You must match this in your blogger settings also so go to your blogger design/layout page.So once you save the Gadget then go to Blogger Settings > Formatting > Set the post per page to the same as the number in your page navigation code (See image Below).Basically if you leave the number at 10 make sure your posts per page setting is 10, if you change it to 7 make sure your post per page is 7 and so on...



If you have any questions and suggestions drop them as a comment below.

No comments:

Post a Comment

Any Question, Feedback, Suggestion and Idea are always welcome.If you are asking a question then don't forget to subscribe the following comments for getting answers directly in your mailbox.