Live Demo of Page Navigation hack.
So let's add this elegant hack to your blog.
STEP 1 - Adding CSS Style
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;
}
This is a one style code. But you can choose your suitable one. All styles are created by Abu Farhan.
CSS Style
Demo of Above Styles
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.
0 comments:
Post a Comment