Follow the following steps for numbered page navigation in blogger -
- Go to Blogger Dashboard >> Template >> Edit HTML.
- Find ]]></b:skin> tag in your blogger template HTML editor
- And then copy the below code and paste before the ]]></b:skin>
.showpagePoint {
text-decoration: none;
background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
color: rgb(41, 41, 41);
border: 1px solid rgb(227, 227, 227);
display: inline-block;
margin-right: 3px;
padding: 7px 10px;
font-weight: bold;
}
.showpageOf {
color: rgb(255, 255, 255);
font-weight: bold;
background: none repeat scroll 0% 0% rgb(224, 102, 102);
padding: 8px;
margin: 8px;
}
.showpageNum a:hover {
color: white;
}
.showpageNum a:link {
background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(242, 242, 242) 100%) repeat scroll 0% 0% transparent;
color: rgb(51, 51, 51);
margin-right: 3px;
display: inline-block;
padding: 7px 10px;
border: 1px solid rgb(227, 227, 227);
}
.showpageNum a:hover {
text-decoration: none;
background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
color: rgb(41, 41, 41);
border: 1px solid rgb(227, 227, 227);
display: inline-block;
margin-right: 3px;
padding: 7px 10px;
}
Adding the JavaScript Cods:
This is the second and last step. Now you wont to add JavaScript codes in your template.
- Again Go to Blogger Dashboard >> Template >> Edit HTML.
- Now find </body> tag in your blogger template HTML editor
- and then Add below code just above </body> tag
<script type=’text/javascript’>
var postperpage=5;
var numshowpage=5;
var upPageWord ='<<';
var downPageWord ='>>';
var urlactivepage=location.href;
var home_page="/";
</script>
<script type=”text/javascript” src=”http://yourjavascript.com/3215021430/www-mybloggerblog-coml.js”></script>
- Finally Save your template and you’re done!
Now enjoy a new experience with number page navigation.
No comments:
Post a Comment