How to Add Simple Numbered Page Navigation Widget to Blogger

0

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