Page Navigation Widget For Blogger

Page Navigation Widget For BloggerThe ability to navigate Blogger blogs has been a long requested feature. Blogger page navigation allows us to number blog pages like those of a book, offering readers the ability to navigate deeper into the archives with ease when compared to the 'newer' and 'older' post links.

Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger. It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger. It had some minor bugs but then Abu Farhan perfected it and gave us an awesome page navigation solution.

Page Navigation Widget For Blogger

Follow these simple steps to install page navigation widget to your Blogger / Blogspot blog.


Step 1 :

Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

Blogger Design
Blogger Edit HTML
Blogger Expand Widget


Step 2 :

Now find (CTRL+F) this in the code:

]]></b:skin>

and paste the following code immideately before/above it.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}


Step 3 :

Now find (CTRL+F) this in the code:

</body>

and paste the following code immideately before/above it.

<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type="text/javascript" src="http://www.webaholic.co.in/other/page-navigation-widget-for-blogger.js"></script>

Note :
In the above code (marked in red) you can change the value from 5 to any you want.

var pageCount=5;

where 5 is the the number of post that apppear in another page you will visit.

var displayPageNum=2;

This code determines the number of additional page navigation numbers that will be displayed on the page.


Step 4 :

Save the template.
Labels: