Number page navigation is a smart widget that also works on blogspot blogs. Putting all the posts on a single page teases the visitors. Or scrolling a long page to see all the posts is a tedious job.
Customize your blog with numbered navigation bar that makes visitors to see all the posts, number of posts, and jump to the number of post they want. This is an example of numbered post navigation. It is working on this blog www.tanhaarzoo.blogspot.com.
Adding or installing this widget to your blog takes following steps. Requirement for this widget is that your blog should have number of posts. More than 5 posts. This widget only show navigation for blog posts not for blog pages.
⇒ Go to Design → Edit Html.
⇒ Press and to find the this code or ending tag of template skin "]]></b:skin>"
⇒ Replace this code with the below code.
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>
The above was the CSS part of the numbered widget now we will add a widget to the body section of template that will display the making of gadget on the page. We want widget to be displayed below the post in the end of the page so we will add the code in the end of the body for widget to be displayed.
⇒ Press & to find the end tag of body i-e; </body> for placing widget.
⇒ Replace </body> with the below widget code.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
</body>
You can change Next and Previous values to your own choice. Similarly you can also add a symbol given below
| Code | Symbol |
|---|---|
| &lArr | ⇐ |
| &rArr | ⇒ |
| &larr | ← |
| &rarr | → |
The widget is added to your blog, just you need t set border and background values of buttons and hover effect. This will be done by adding a "html/javascript" page aliment to Design layout.
⇒ Go to Design → Page Element
⇒ Click to Add a widget
⇒ Select "html/javascript"
⇒ Past the below code in it and Click Save
<style type='text/css'>
.showpageArea a {text-decoration:underline;
}
.showpageNum a {text-decoration:none;
border: 2px solid #C7A317;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {border: 2px solid #C7A317;
background-color:#FDD017;
}
.showpagePoint {color:#333;
text-decoration:none;
border: 2px solid #C7A317;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {text-decoration:none;
border: 1px solid #C7A317;
padding:5px;
}
.showpage a:hover {text-decoration:none;
}
.showpageNum a:link,.showpage a:link {text-decoration:none;
color:#333333;
}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord="Previous";
var downPageWord="Next";
</script>
<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'>
</script>
Note:
You also have to change some settings of your post
this is done by following steps
⇒ Click on Design → Page element
⇒ Click on Edit option of Blog Posts
⇒ Make setting as in below Picture
Also add Read More to blog post:
No comments:
Post a Comment
leave your Remarks Here