How to Add Numbered Page Navigation on Blogger Blog

Blogger numbered page navigation

In blogger blog you can set the number of posts to be displayed on main page by signing in to your Blogger Dashboard > Layout > then editing your > Main (Blog posts) as shown below.


Page navigation in blogger


Once the number of posts on your blog exceeds this set number of posts to be displayed on main page then it shows as Older Posts at the end of your all posts displayed on main page as shown below.

Adding page navigation


In order to change this style of navigation to different attractive numbered page navigation on main page, you have to edit HTML and add some CSS. As Blogger does not have any built-in function of page numbering and to help our blog visitors to navigate quicker (jump from one page to another or click on a specific page) this tutorial of “how to add numbered page navigation in blogger blog” is very helpful in improving your blog.

In this tutorial we have mentioned 7 different types of numbered page navigation styles, so that you can select any one and apply to your blog.

Adding numbered page navigation to Blogger blog

Adding of numbered page navigation involves two simple and quick steps,

  I.       Adding the CSS to your exist HTML code
 II.    Adding the Script

I. Adding the CSS

  1.  Go to Blogger Dashboard > Template > then click on EDIT HTML.
  2. Now click anywhere inside the HTML code and press Ctrl+F to open search box.Type or paste the following tag in search box and hit enter button to find it.
]]></b:skin>     
Blogger main page navigation


    3.    Now choose one of the following numbered page navigation styles and copy the code             and paste it just above the  ]]></b:skin>  tag.


Style 1
Navigation style
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} .showpageOf{display:none!important}#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} #blog-pager .pages{border:none;}


Style 2
Page navigation style

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important}#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

Numbered page navigation styles
#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}#blog-pager .pages{border:none;background: none;}


Style 4 
blogger page style
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} .showpageOf{display:none!important}#blog-pager .pages{border:none;}


Style 5
Navigation of blogger pages
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} .showpageOf{display:none!important}#blog-pager .pages{border:none;}


Style 6
Navigation style
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important}#blog-pager .pages{border:none;}


Style 7
Page navigation style
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important}#blog-pager .pages{border:none;}

II. Adding the Script

    4.  Now find (Ctrl+F) following tag:

          </body>

     5.  Add the following script just above </body>


 <b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>  /*<![CDATA[*/    var perPage=7;    var numPages=6;    var firstText ='First';    var lastText ='Last';    var prevText ='« Previous';    var nextText ='Next »';    var urlactivepage=location.href;    var home_page="/";  /*]]>*/</script>  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/></b:if></b:if>

You can change the text as preferred by you instead of 'First' 'Last' 'Previous' 'Next' just changing the text inside the quote.
  
Now you have done adding your favorite numbered page navigation to your blog and also learnt about "How to add numbered page navigation widget to your blog".

Note:  The number of posts on your blog should be more that number of posts you have set to be displayed on main page to see 'First' 'Last' or 'Previous' 'Next' tabs below your all posts on main page.

Thank you,

For any difficulties please feel free to comment.





4 Comments:

  1. For some reason the widget does not appear on my blog. Nothing shows...Can you help me out?

    ReplyDelete
    Replies
    1. The script was deleted, thats the reason for the problem

      Delete
  2. Yes sure.. you did everything as said in my post?

    ReplyDelete

Privacy Policy
Disclaimer
Terms of Service
Sitemap