For WordPress users must already be familiar with page navigation. For Blogger users let's We hack the template.
Here are the steps:
1.Login to Blogger Dashboard and navigate to Layout > Edit Html
2.Don’t click the checkbox which says ‘Expand Widget Templates’
3.Now find
]]></b:skin>
and replace with
/* Page Navigation styles */ .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; } ]]></b:skin>
4. Now find
</body>and replace with
<!--Page Navigation Starts--> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=4; var numshowpage=6; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggerhack.googlecode.com/files/pagenav.js' type='text/javascript'/> <!--Page Navigation Ends --> </body>There are some customizable parameters in this code
varpostperpage=4;This code determines the number of posts that would be displayed per page.
varnumshowpage=6;This code determines the number of additional page navigation numbers that will be displayed on the page.
var upPageWord ='Previous'; downPageWord ='Next';These two lines determine the text that would be shown for the previous page and next page respectively.
9 comments
You are edit my script and delete my Name.
ReplySorry Abu.. we just googling and share it.. I'll give a credit to your blog
Replyok, no problem
Replynot working for my blog....
Replyoh,, i'm looking for this tutorial many more but always not working!
ReplyVery nice..it looks great on our page!
ReplyThanks :)
i added this in my bog called
ReplyWWW.QUIZVOOK.COM.
Thanks View my blog http://files27.blogspot.com
Replyok
ReplyPost a Comment
Attention...!!! Do not include a direct link! It will be removed automaticly from our comment system.