Many of the blogger face a problem of their blogs page navigation. Their blogs shows old and new post instead of page numbers. This cause less page views of a blog. Because if a blog have many page then the visitor can't to go to the last post and the post remain ignored.
As I already stated Page navigation allows us to number blog pages(1, 2, 3 ....) like those of a book. This replaces the 'newer' and 'older' post links and give users/visitors an ability to go to the deep into your blog. So let's add this elegant hack to your blog. Follow me ...
Go to Blogger Dashboard > Layout > Edit HTML. Always Download Full Template for Backup. Do NOT click on Expand Widget Templates. Now look for
STEP 2 - Adding JavaSript
Look for
And add following code ABOVE it.
Here you can change Prev and Next Text.
var postperpage=7;
var numshowpage=4;
Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation
e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;
Save your Template.
STEP 3 - Label Fix (Customization)
Again go to Blogger Dashboard > Layout > Edit HTML. This time Click on Expand Widget templates.
Look for
And replace it with
Again here you have to change 7 to 5 if you want to show 5 posts per page.
Save your template and view your blog.
Enjoy! If you have got any question or any problem you can ask me posting via comment.
Go to Blogger Dashboard > Layout > Edit HTML. Always Download Full Template for Backup. Do NOT click on Expand Widget Templates. Now look for
]]></b:skin>Now add following code ABOVE it.
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
STEP 2 - Adding JavaSript
Look for
</body>
And add following code ABOVE it.
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
Here you can change Prev and Next Text.
var postperpage=7;
var numshowpage=4;
Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation
e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;
Save your Template.
STEP 3 - Label Fix (Customization)
Again go to Blogger Dashboard > Layout > Edit HTML. This time Click on Expand Widget templates.
Look for
'data:label.url'
And replace it with
'data:label.url + "?&max-results=7"'
Again here you have to change 7 to 5 if you want to show 5 posts per page.
Save your template and view your blog.
Enjoy! If you have got any question or any problem you can ask me posting via comment.
No comments:
Post a Comment