Add Numbered Page Navigation widget to your blog

If your blog has lots of pages, the Numbered Page  Navigation widget is very useful. Because it is easy to go other pages. I think you've seen like that widget on other blogs and webs. Normally blogger has this counter.

Newest Posts               Home               Older Posts

Using this we have to view page by page to go to the page that we want. It is difficult that the blog has too many pages. But using page counting widget, it shows all pages in numbers and we can easily view any page we want.

Okay now we add this widget to your blog. It is very easy and follow my steps correctly.

Step 1

Login to your blogger dashboard and go to the Layout >> Add a Gadget >> HTML/JavaScript.

Now paste below code in it and save.

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}.showpageNum a:link,
.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">
var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";
</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js">
</script>

Now drag it and place below the Blog Posts. See image.

Step 2

Now go to Template >> Edit HTML and check the Expand Widgets Template.

Then search for the ]]></b:skin> code and paste below code above the ]]></b:skin> code.

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

Step 3

Now again search for the </body> tag and replace it with below code.

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>

</b:if>

<!--Page Navigation Ends -->

</body>

Step 4

Then after the all Save your template and view the blog.

• If you want to add more page numbers to the widget find this code and replace 5 with any number.

var pageCount=5;

• If you want to change the number of posts per page replace 5 with any other number.

var displayPageNum=5;

How is the widget? Is it working or not?

This widget may NOT WORKING on some customized blogger templates.

Share on Google Plus

About Eranda

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.