the blogger

HOME ABOUT US CONTACT US PRIVACY POLICY SITEMAP ADVERTISING HERE      
Megaupdate24
HOME
BLOGGER BLOG GUIDE
BLOGGING TIPS
SOCIAL MEDIA
ADSENSE
SEO
TECHNOLOGY WORLD

Text to Search...

Home / Blogging tips / How to Add Page Number Navigation Widget for Blogger
How to Add Page Number Navigation Widget for Blogger

11:04:00 AM   LUTHFAR RAHMAN
In a Blogger template, we can set page number navigation, It is essential for a Blogger Blog.When you post 15 or 20 over then you should do it manually.When your Blog made by good look with nice page navigation then you think you make it one step forward for the visitor.It helps visitor jump from one page to another page or click on a specific page and know the total number of  posts Published.Now I share a tutorial of How to Add Page Number Navigation widget for Blogger/ Blogspot Blog. Hopefully, you can setup your page number  in blogger blog by following this post.

Recommended: How to Add Meta Description to Blogger Blog.

How to Add Page Number Navigation Widget for Blogger1
Adding Page Number Navigation widget for Blogger

You can add this by following two steps.
1. Adding The CSS.
2. Adding the JavaScript.

Now let's see how to do it.

Step One: Adding the CSS

Recommended: How To Backup Blogger Blog Template.

Rule1 : Firstly go to Blogger Dashboard> Template> Click on the Edit HTML Button.

How to Add Page Number Navigation Widget for Blogger2

Rule2: Click inside the HTML code area and press Ctrl+F for open the Blogger search box.

How to Add Page Number Navigation Widget for Blogger3

Rule3: Now find this code ]]></b:skin> by using your search box. When you get it then choose one of the following numbered page navigation style  and copy the code just from below.
Now Just above ]]></b:skin>  paste the style code what you want in your Blog.

Style 1:

How to Add Page Number Navigation Widget for Blogger4

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

How to Add Page Number Navigation Widget for Blogger5

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

How to Add Page Number Navigation Widget for Blogger6
    #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:

How to Add Page Number Navigation Widget for Blogger7
  #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:

How to Add Page Number Navigation Widget for Blogger8
   #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:

How to Add Page Number Navigation Widget for Blogger9
   #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:

How to Add Page Number Navigation Widget for Blogger10
  #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;}

Step Two: Adding the Java script


Rule 1: Now find </body> this tag .

Rule 2: Add the following  script just 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>

Rule 3: Now click on the save template Button and enjoy it.

Recommended: Add Social Media Buttons for blogger Blog's Post Sharing.

Now you are done for setup page number navigation. Do let us know via comments. And if you find this post useful, help me by sharing this post on Facebook, Twitter or Google+.
Facebook55 Pinterest12 LinkedIn50 Tumblr0 Reddit Share117
About luthfar rahman


Luthfar Rahman is a founder of "Guide to Blogging and Tech" ,He is a Blogger and Studying CSE at "North South University".Follow me on Facebook ,Google+ and Twitter.
RELATED POSTS


How to Add Custom Robots Txt in Blo...

How to Add Social Media Widget for ...

How to Submit My Website to Alexa
8 comments:


SAMNANGBLOGGERAUGUST 22, 2015 AT 2:30 AM
but still now display page number.

Reply
Replies

LUTHFAR RAHMANJANUARY 4, 2016 AT 4:49 AM
I don't clear of your comment, please clear it.

Reply

ENAALFAMAY 15, 2016 AT 8:29 AM
Thanks to megaupdate24 / But AFTER SIX MONTHS OF USE PAGE NUMBER NAVIGATION HAS DISAPPEARED . (ALL OF THE ABOVE CODDE ARE STILL ON HTML TEMPLATE) wHY ??

Reply
Replies

LUTHFAR RAHMANJUNE 14, 2016 AT 12:07 AM
:( this is so sad friend. But don't worry. You just use these code again and remove which you used before. If it will be not working you please inform me with detail as soon as possible.

Reply

SABA NOORMAY 17, 2016 AT 6:58 AM
its stop working please help

Reply
Replies

LUTHFAR RAHMANJUNE 14, 2016 AT 12:04 AM
Sorry for late. If you face any problem for adding page number navigation you please use these again and remove which you used before. If it will be not working you please inform me with detail as soon as possible. I will try to help you.

Reply

KHA LEDMAY 18, 2016 AT 7:56 AM
yes for me too its stopped working http://techglow.net

Reply
Replies

LUTHFAR RAHMANJUNE 14, 2016 AT 12:06 AM
If you face any problem for these code you please use these again and remove which you used before. If it will be not working you please inform me with detail as soon as possible. I will try to help you.

Reply

Newer Post Older Post Home
Popular Post Video Category
 High PR Social Bookmarking Sites List Updated 2016
High PR Social Bookmarking Sites List Updated 2016
 High PR Dofollow Blog Commenting Sites List Updated 2016
High PR Dofollow Blog Commenting Sites List Updated 2016
 How to Add Page Number Navigation Widget for Blogger
How to Add Page Number Navigation Widget for Blogger
 Improve Alexa Ranking Quickly Step By Step 100% Guaranteed
Improve Alexa Ranking Quickly Step By Step 100% Guaranteed
 Top 10 Largest U.S Business Insurers
Top 10 Largest U.S Business Insurers


Alexa Certified Site Stats for megaupdate24.com
ABOUT ME

My photo
luthfar rahman

I am luthfar rahman(mithun), work at www.megaupdate24.com.I am a Professional Blogger and Computer Engineer.
View my complete profile
LABELS

Adsense
Alexa
Blogging tips
Business Insurance
Car companies
Google
History
How To
Internet
News
Seo
Social Media
Technology
Tutorial
Windows
FEATURED POST

How to Add Page Number Navigation Widget for Blogger

In a Blogger template, we can set page number navigation , It is essential for a Blogger Blog .When you post 15 or 20 over then you should ...

 DMCA.com Protection Status
Created By Guide to Blogging & Blogger Templates | Designed By Luthfar Rahman
HOME ABOUT CONTACT SITEMAP