Thursday, September 24, 2020
Home Blogging Tips & Tweaks How to Add Simple Numbered Page Navigation Widget to Blogger

How to Add Simple Numbered Page Navigation Widget to Blogger

The Older and Newer posts button are not as fanciful as they used to be which is why most bloggers have resorted to adding numbered page navigation to their blog. As you know, the Older and Newer posts button only takes you to specific posts and not pages containing your posts. For a blog with lots of posts, the addition of a numbered page navigation is a good thing in that it helps your break down your posts into groups based on the time they are published and the category under which they fall. It is a good practice as a blogger to specify the number of post you want displaying per page so that when you have numerous post, you can just add a numbered page navigation so that every page number will contain a specific number of posts.

By default, when you specify the number of posts you want appearing per page, #Blogger automatically adds a Newer and Older Posts navigation links to the page once the number posts you have in your blog exceeds the number you specified. For a quicker page navigation by your blog visitors, it is good to use the numbered page navigation. If you haven’t added it yet to your blog wish to use it make navigation easier for your blog visitors, then here is a tutorial on how to add it;

  • Login to your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for ]]></b:skin> using Ctrl + F.
  • Copy the CSS code below and paste just above/before ]]></b:skin>
.page-navigation{clear:both;margin:30px auto;text-align:center;}

.page-navigation span,.page-navigation a{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);}

.page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;}

.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);}

.page-navigation .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);}
  • Next with the help of Ctrl + F, search for
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
  • Copy the script below and paste just after/below <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>
<b:includable id='page-navi'>

<div class='page-navigation'>

<script type='text/javascript'>

var pgNavigConf = {

perPage: 7,

numPages: 6,

firstText: &quot;First&quot;,

lastText: &quot;Last&quot;,

nextText: &quot;Next&quot;,

prevText: &quot;Prev&quot;

}

</script>

<script src='https://ugwoke-charles-jsfiles.googlecode.com/svn/trunk/page-navigation.js' type='text/javascript'/>

<div class='clear'/>

</div>

</b:includable>
  • To make sure that the numbered page navigation appears after your posts, search for
<b:include name='nextprev'/>
  • Replace it with the below code
<b:if cond='data:blog.pageType == "index"'>

<b:include name='page-navi' />

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<b:include name='page-navi' />

</b:if>

</b:if>


  • For a different template, you can search for the below section of code in case you can’t find the above
<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

...

<b:includable id='main' var='top'>

...

</b:includable>

</b:widget>

</b:section>
  • Just above the </b:includable> tag, add the code below
<b:if cond='data:blog.pageType == "index"'>

<b:include name='page-navi' />

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<b:include name='page-navi' />

</b:if>

</b:if>
  • Finally click on Save Template and you are done.

Further Customization:

If for any reason you want to change the texts “First“, “Prev“, “Next” and “Last” to your own (maybe to something like “Primera”, “Anetrior” “Siguiente” and “Última” for those of you running your blog in Spanish), then you need to locate the “First“, “Prev“, “Next” and “Last” texts as found in the first section of code and then replace them with whatever you want.

Don’t hesitate to let me know in case you get stuck anywhere while going through the guide above. Have Fun!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments