How to install numbered pagination into blogger?

Do you want to add a numbered page navigation widget into your blogspot blog? If yes, then you have just arrived to the right page. Today we will learn that how we can install a numbered pagination widget into our blogger blog.

To install numbered pagination widget, first go to:

 Blogger Dashboard >> Template >> Edit HTML and search for </b:skin> tag.

After finding </b:skin> tag it is time for us to install the below given CSS3 stylesheet for our pagination widget into our template just before </b:skin> tag.

[php]
.showpageNum a {
background: #F4F4F4;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #F4F4F4;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #111!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
font-family: ‘Merriweather’, serif;
border: 1px solid #b9b9b9;
padding: 5px;
background-color: rgb(244, 244, 244);
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
margin-right: 5px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

.showpageOf {
display: none;
}[/php]

Once you have added the stylesheet, it’s time to add the Javascript code just before </body> tag. The Javascript code is given below:

[php]

<!–Page Navigation Starts–>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<script type=’text/javascript’>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src=’https://mirocine.googlecode.com/files/blogger_pagenavi_min.js’ type=’text/javascript’/>
</b:if>
</b:if>
<!–Page Navigation Ends –>
[/php]