• Home
Tech News, Magazine & Review WordPress Theme 2017
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
No Result
View All Result
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
No Result
View All Result
Techno
No Result
View All Result

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

Admin by Admin
August 15, 2021
Home blogger posts
Share on FacebookShare on Twitter
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.

Advertisement. Scroll to continue reading.
numbered page navigation widget

Adding Numbered Page Navigation to Blogger

You tin add together this widget inward only 2 steps.

Advertisement. Scroll to continue reading.
  1. Adding The CSS.
  2. Adding The Script.

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

Advertisement. Scroll to continue reading.

1. Adding The CSS

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

blogger template html

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

numbered page navigation mode 1

 #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

numbered page navigation mode 2

 #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

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

Gray Page Navigation With Blue Page Number

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

Blogger Pagination on Green amongst Orange together with Pink on Hover

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

Orange Numbered Page Navigation Widget for Blogger

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

Grey Paged Navigation for Blogger amongst Red Current Page

numbered page navigation mode 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 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!

SHARE TWEET GOOGLE+ PIN IT
Admin

Admin

Next Post

5 Tardily Ways To Ameliorate The Seo Of A Weblog & Boost Traffic - Helplogger

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • BRAIN ILLUMINATION – The Monkey Mind VS the Mind of Light
  • SMS Mobile Text Marketing: Is Your Business Ready For The Mobile Marketplace?
  • What Can Visual Composer: Page Builder for WordPress Do for Your Website?
  • LotRO Macros
  • Tips To Make PSD To HTML Conversion Simpler

Recent Comments

  1. خرید لایک ارزان قیمت on Filter Out Your Visits To Your Weblog From Google Analytics Traffic Statistics – Helplogger
  • About
  • Advertise
  • Privacy & Policy
  • Contact
No Result
View All Result
  • Home

© 2022 TechnoNews