How To Add Together Numbered Page Navigation Widget For Blogger – Helplogger

In Blogger , nosotros bring the selection to laid the issue of posts nosotros desire to display per page yesteryear going to the Settings carte > Posts together with comments > Show at most ? posts. Once the issue of full posts inward our weblog exceeds this issue , nosotros volition run across “Older Posts” together with “Newer Posts” navigation links inward our domicile page together with archive pages footer every bit Blogger doesn’t bring whatever built-in portion on page numbering. But page numbers instead of older together with newer posts links could help our weblog visitors to navigate quicker (jump from 1 page to approximately other page or click on a specific page) together with know the full issue of posts published.

So this tutorial volition demo you lot how to add together numbered page navigation using Javascript to a Blogger/ blogspot blog. You tin select 1 of the seven available styles below.

Adding Numbered Page Navigation to Blogger

You tin add together this widget inward only 2 steps.

1. Adding The CSS.
2. Adding The Script.

Now let’s run across how to add together the CSS mode for page navigation.

1. Adding The CSS

Step 1. Go to Blogger Dashboard > “Template” > click on the “Edit HTML” button:

Step 2. Click anywhere within the code expanse together with press the CTRL + F keys to opened upward the Blogger search box.

… type or glue the next tag within the search box together with hitting Enter to honor it:

]]>

Step 3. Now conduct 1 of the next numbered page navigation styles together with re-create the code only below it. Just inward a higher identify ]]> glue the code of the mode that you lot desire to use:

Numbered Page Navigation on Gray

 #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 enterprise #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;}

Black Numbered Page Navigation With Orange Current Page

 #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 , fifty , fifty , 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50 , fifty , fifty , 0.53);box-shadow: 0px 5px 3px -1px rgba(50 , fifty , fifty , 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 , fifty , fifty , 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50 , fifty , fifty , 0.53);box-shadow: 0px 5px 3px -1px rgba(50 , fifty , fifty , 0.53);}

Dark Numbered Page Navigation With Blue Current Page

 #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;}

Gray Page Navigation With Blue Page Number

#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;}

Blogger Pagination on Green amongst Orange together with Pink on Hover

#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;}

Orange Numbered Page Navigation Widget for Blogger

#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;}

Grey Paged Navigation for Blogger amongst Red Current Page

#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 enterprise #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;}

Note: if you lot desire to cover the “First” together with “Last” buttons add together this job below the CSS code:

.firstpage , .lastpage {display: none;}

2. Adding The Script

Step 4. Now honor (CTRL + F) this tag:

UPDATED: Working version for to a greater extent than than 500 posts.

Step 5. Add the next script only inward a higher identify it:

How to Configure Numbered Page Navigation

After installing , you lot powerfulness desire to modify these default settings:

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

1. perPage: how many posts volition live shown inward each page (i.e. 7). This value has to live the same every bit the issue of posts on the primary page. Otherwise , add together the same issue yesteryear going to “Settings” > “Formatting” together with type it inward the “Show at most” champaign , hence click on the “Save Settings” button.
2. numPages: how many pages volition live shown inward the page navigation (6).
3. To supplant the ‘First‘ , ‘Last‘ , “« Previous” together with “Next »” texts , only type your ain within the quotes.

Labels fix:

By default , Blogger volition demo xx posts on label pages. To brand this widget look on label pages , nosotros volition bring to cutting downwardly this downwardly to the value that nosotros gave for the perPage variable.

Find each occurrence of the next code snippet:

expr:href=’data:label.url’

Replace it amongst this 1 below:

expr:href=’data:label.url + “?&max-results=7“‘

Here 7 is the issue of posts that volition live displayed per page.

Step 8. Click on the “Save Template” push together with nosotros finished adding the issue page navigation widget for Blogger. Enjoy!