By 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 != "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<script type=’text/javascript’>
var pageCount=6;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src=’https://mirocine.googlecode.com/files/blogger_pagenavi_min.js’ type=’text/javascript’/>
</b:if>
</b:if>
<!–Page Navigation Ends –>
[/php]
