Add The New Blogger Numbered Page Navigation To Your Blog


Adding the navigation gadget to your blog is also easier with this new script as you don't need to add a huge chunk of Css to your Blogger template. Just a small piece of code added to a html/javascript gadget and your done.

Add this  Numbered Page Navigation Widget to your blog copy and paste the code into your sidebar. Follow the steps given below to add the widget into your blog's sidebar. Log in to Blogger. Go to Layout > Page Elements. Click on Add a Gadget. Select HTML/JavaScript from the list. Copy or paste the code given below and Save. 


<a href='http://www.djmix4u.blogspot.com'><img alt='Krishna Zone' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeM8HAmmj4CKR6uPMUP8nY8i-Yqfxq1bFyGg0XF_7Q1kMUuCHL9PfApDOyRfl9GvtlSCSfTL7oLllgOofQBVtiY87iRyiQriQQelulAnjoytora4IDxy0gjdXp9SvE_5oB7z_vrqNPe42q/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 -
1- I have set the posts per page at 10 (In Red Above), you can increase or decrease this however you must match this in your Blogger settings.So once you save the gadget go to your Blogger settings > Formatting > Set the posts 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 to 8 make sure your posts per page is 8 and so on..




2- OK just to keep your design page in proper order i recommend you drag and drop the gadget below the posts section.
Previous Post Next Post