How to put NumberPage on Blogger Blogs (Blog Pager)

To make your visitors easily navigate into your Blog. You need to add a button that can go up to your very old post, That's why we have here our number page or you can also call it as Blog pager for Bloggger Blogs.

This is a really simple widget and it's very easy to implement in your Blogger Blogs. The tutorial is complete so you won't be going to nowhere. You can now scan down and read the tutorial below.

Procedure on How to put NumberPage on Blogger Blogs:

• First thing to do is to go to Templates then click > Edit HTML.

• Then Paste the below code above: ]]></b:skin>.

* NumberPage----------------------------------------------- */
.showpageArea a {
text-decoration: underline;
}
.showpageNum a {
text-decoration: none;
border: 1px solid #cdcdcd;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
font-size: 15px;
}
.showpageNum a:hover {
border: 1px solid #cdcdcd;
background-color: #fff;
}
.showpagePoint {
color: rgb(255, 255, 255);
text-decoration: none;
border: 1px solid #cdcdcd;
background: #4c84a3;
margin: 0 3px;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
font-size: 15px;
}
.showpageOf {
text-decoration: none;
padding: 3px;
margin: 0 3px 0 0;
font-size: 15px margin: 0 3px;
}
.showpage a {
text-decoration: none;
border: 1px solid #cdcdcd;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
font-size: 15px;
}
.showpage a:hover {
text-decoration: none;
}
.showpageNum a:link,.showpage a:link {
text-decoration: none;
color: #333333;
background-color: #fff;
}
.showpageOf {
display: none;
}
.showpageNum {
margin: 0 3px;
}
.showpageArea {
padding-bottom: 20px;
padding-top: 8px;
}

To change the color of the Number page widget for blogger, just change the color code of the text that is highlighted in yellow.

• Then after doing that step, Find this code line of code then expand it by pressing the Black arrow button.

<b:includable id='nextprev'></b:includable>

• Then paste the code below as with the instruction that you can also see below.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<center>
<div class='showpageArea'><span class='showpageOf' style='COLOR: #000;'> Pages (4)</span><span class='showpagePoint'>1</span><span class='showpageNum'><a href='/search?updated-max=2014-02-02T07%3A04%3A00-08%3A00&amp;max-results=6'>2</a></span><span class='showpageNum'><a href='/search?updated-max=2013-12-27T04%3A10%3A00-08%3A00&amp;max-results=6'>3</a></span><span class='showpageNum'><a href='/search?updated-max=2013-11-14T02%3A50%3A00-08%3A00&amp;max-results=6'>4</a></span><span class='showpage'> <a href='/search?updated-max=2014-02-02T07%3A04%3A00-08%3A00&amp;max-results=6'>Next</a></span></div>
  </center></b:if>

• Save your Changes and you're done!

Final Words:

This widget will only show on homepage because it's only coded to be showed in their, but you can still change it by removing the <b:if cond='data:blog.url == data:blog.homepageUrl'> and the closing tag of it, but it's not really recommended. Thanks for reading this widget post. I hope you enjoyed this Blogger Widget tutorial.