Skip to main content

How to Add Number Navigation in Blogger Template

How to Add Number Navigation in Blogger Template : This Post is all about how you can add navigation in your blogger Main Page. In Blogger you can select how many post you want to appear on main page. if number of post more then your selected post then blogger show's the Previous Post And Next Post navigation. so Mostly 99% people want to add number post in their blog main page and also want stylish navigation which is look attractive and stylish on Main page.
You can change number of post which is showing on main page. Go to the Setting->Post And Comments and then you need to change number of post on the box and save your settings.
i am sharing with you a six different and Unique stylish Navigation and how you can add Number navigation on your blog tutorial.

How to Add Number Navigation in Blogger Template

You just need to add to things to add new stylish navigation into your blogger.
  1. Add CSS files.
  2. Add Script in Blogger

1) Adding The CSS

Step 1. You just need to go template-> Edit Template
Step 2. Press Ctrl+F to open blogger search Box.
Step 3. ]]></b:skin> copy this and paste in search box and search. find and paste your code below this. because we write all CSS below this tag.

Style 1:

  #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 2:

numbered page navigation style 3
  #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 3:

numbered page navigation style 4
 #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 4

numbered page navigation style 5
 #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 5


numbered page navigation style 6
 #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 6

numbered page navigation style 7
 #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;}

2) Adding Script

Step 1. Find </body>
Step 2. Add the following script above it.
<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>

Configuration of Number Navigation in Blogger Template

perPage: 7,numPages: 6,var firstText ='First';var lastText ='Last';var prevText ='« Previous';var nextText ='Next »';} 
Labels:

Comments

Post a Comment

Popular posts from this blog

How To Start A Blog And Make It Successful

How To Start A Blog And Make It Successful : If you are a new blogger and you don't know about blogging and you want to make it successful then you must know about some important thing otherwise you can not get desire output from your blog. and you waste your all efforts and time on blog. Read some my Experience Suggestion below. How To Start A Blog And Make It Successful Never Use Free Blogger Theme:  First Remember one thing never use free themes you are on WordPress or blogger doesn't matter don't use free themes because they are not develop accordingly today requirement few themes are not even not responsive and also not SEO friendly. if you want your blog go viral on social media and google then please be original write your own content and must post that contents which audience demand. But if your theme is not good you may right your own contents but finally your google can't understand your posts and it take long time in indexing also due to e...
Post a Comment
Read more

How To Install WAMP Server and Configure in Windows

How To Install WAMP Server and Configure in Windows : Many students don't know how to install and configure WAMP on their computer so In this Tutorial your learn how you can install WAMP server on your Windows 10, Windows 8.1 , Windows 8, Windows 7. Follow few steps to Install WAMP Server in your System. First you need to download the WAMP server. Here visit below link. http://www.wampserver.com/en/ After download Run setup and install WAMP Server on your Computer. Click next. it will install it self. After installation run WAMP server on your computer and check tray icon is green or red. Green Color means WAMP is online. Red Color means WAMP is not Running. In above image you can see the green color wamp icon and options of WAMP server.  If you click on put offline the server goes offline. http://localhost/ Open localhost and you can see the main screen of Wamp server. WAMP  is stand for  Windows Apache Mysql PHP . Some developers use localhos...
Post a Comment
Read more

3 ways to Open Block Sites On your Computer

3 ways to Open Block Sites On your Computer:  In this Article we tell you about how you can open block website on your system. Their is many ways to open block website on your computer. some colleges not allowed to use social network sites in college, some companies are not allowed to open site in company. so if you want to open a site in your company its very simple so you just need to follow few steps to open a website on your system. Ultrasurf or zentmate or hotspotsheild, download one of them and install in your System. Run software and now you able to open any block site in your system. Also you can open blocked site on  http://videoproxy.co. If you want to open YouTube so you can use YouTube Alternatives website to open YouTube on your system. these are YouTube Alternative. http://playit.pk   http://www.ytpak.com Their is few software which allows you to open block website on your system. which is listed below. ultrasurf is one the best softwa...
Post a Comment
Read more