How To Customized Page Navigation For Blogger Blogs

Ritesh Warke On Monday, April 25, 2011

This script is designed to allows users to navigate through blogger pages, just like those of books.It 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

<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'/>

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.

If you have any query or suggestions on Customized Page Navigation For Blogger Blogsplease feel free to comment below.

Follow @Digital_Eye