iBlognet

Home Blogger Google

Customized Page Navigation For Blogger Blogs

by Editor

Page navigation allows users to navigate through blogger pages, just like those of books. The script will replace the default “Older” and “Newer” page links with numbered pages, as seen in the image above. Just follow the steps below to add numbered page navigation.


Step 1: Login to your blogger account. Goto Design > Page element > Edit HTML and click on download full template

Step 2: Search for </b:skin> and add the following CSS code just before it:

.showpageNum a
{
font:15px Arial,Verdana;
text-decoration:none;
background:#000;
color:#FFF;
border:1px solid #000;
margin:0 4px;
padding:4px 8px;
}
.showpageOf
{
color:#cc0000;
font:15px Arial,Verdana;
margin:0 8px 0 0;
}
.showpageNum a:hover
{
color:#FFF;
background:#cc0000;
border:1px solid #cc0000;
}
.showpageArea
{
font:15px Arial,Verdana;
color:#FFF;
margin:10px 0;
}
.showpagePoint
{
color:#FFF;
font:bold 15px Arial,Verdana;
border:1px solid #FFF;
background:#cc0000;
text-decoration:none;
margin:2px;
padding:4px 8px;
}
.showpageNum a
{
font:15px Arial,Verdana;
text-decoration:none;
background:#000;
color:#FFF;
border:1px solid #000;
margin:0 4px;
padding:4px 8px;
}
.showpageOf
{
color:#cc0000;
font:15px Arial,Verdana;
margin:0 8px 0 0;
}
.showpageNum a:hover
{
color:#FFF;
background:#cc0000;
border:1px solid #cc0000;
}
.showpageArea
{
font:15px Arial,Verdana;
color:#FFF;
margin:10px 0;
}
.showpagePoint
{
color:#FFF;
font:bold 15px Arial,Verdana;
border:1px solid #FFF;
background:#cc0000;
text-decoration:none;
margin:2px;
padding:4px 8px;
}

Step 3: Search for </body> and copy paste the following code just after it

<!– PAGE NAVIGATION START IBLOGNET.COM–>
<script type=’text/javascript’>
var pageCount=15;
var displayPageNum=5;
var upPageWord =’« ‘;
var downPageWord =’ »’;
</script>
<script src=’http://dl.dropbox.com/u/23364774/iblognet/JS/page-navigation.js’ type=’text/javascript’/>
<!– PAGE NAVIGATION STOP IBLOGNET.COM–>

var pageCount=15; –> is the number of blog post on your main page
var displayPageNum=5; –> is the number of pages you want to show on navigation

Step 4: Save your template and view your blog.

Step 5: Reply me back if you don’t see page navigation on your blog. Just upload the template back which you downloaded in Step 1.

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

Comments on this entry are closed.

Previous post:

Next post: