|
SOCIALIZE IT →
|
Tweet |
One of the important features of a good blog or site is that it is very easy for the blog visitors to navigate throughout the site. A site which is structured in such a way that the visitors have to take efforts to move from one page to another is seen as a poorly designed site.
Having proper navigation is important as it also helps to increase the page views for your blog. Blogger users are aware of the Newer Posts and Older Posts links at the bottom of the blog.
Add it to blogger
- Go To Blogger.com > Template > Edit Html > Proceed
- Tick Expand Widget Templates
- Search For </body> tag.
- Copy The Code Below And Paste It Just After </body> tag.
<style type="text/css">
.showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
.showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXy1VZxy9__zSh0i_pHYjBeltXfFWOhqQuDq7rxkSoagOiUg1A5XzVjg5LKP8Bl4w8UBzae9jx0bGhVWy6IYda9qzlxMAtvtPXhvOYhAsDuSCBZNEB75Ht6_j-W_MO1TcmQI94mK3hbHAj/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
.showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
.showpageOf{float:left;padding-top : 6px;}
.showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QCjNjIWH8A3_5w4EVEwXcxvoZaWzQqk2Cofw2LmMBuEzQX2DvJ7cJ5LCpHOtdo9dPYPH2sGmUlWivIck_pnC-CnyEJ7Nwolthc3YbBu0ojK26xeJ7-P_9L0bSuZgnzsGgvo6jq6SZDmh/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
.showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QCjNjIWH8A3_5w4EVEwXcxvoZaWzQqk2Cofw2LmMBuEzQX2DvJ7cJ5LCpHOtdo9dPYPH2sGmUlWivIck_pnC-CnyEJ7Nwolthc3YbBu0ojK26xeJ7-P_9L0bSuZgnzsGgvo6jq6SZDmh/) no-repeat 0 100%;color : #fff;}
.showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QCjNjIWH8A3_5w4EVEwXcxvoZaWzQqk2Cofw2LmMBuEzQX2DvJ7cJ5LCpHOtdo9dPYPH2sGmUlWivIck_pnC-CnyEJ7Nwolthc3YbBu0ojK26xeJ7-P_9L0bSuZgnzsGgvo6jq6SZDmh/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
.showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=1;
var upPageWord="Previous";
var downPageWord="Next";
</script>
<script type='text/javascript' src="http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js"/>
- Click Save Template
- You're Done.
0 comments: