TIPS COM: How to Add Page Number on Blogger Blog

Saturday, January 10, 2015

How to Add Page Number on Blogger Blog

By default your blogger blog doesnt have any numbered page navigation system. Instead of it the usual themes provide Newer Post, Home and Older post to navigate the site. But it will be very convenient for the visitors to navigate your site, if you place a page number navigation system at the bottom of your contents!

In this post Im gonna share a code with you. And this can turn your old navigation system into numbered navigation system! Hope this will help you lot.

It is as easy as adding a gadget. All you need to do is just add an HTML or JavaScript Gadget. Just follow the steps below:

First go to www.blogger.com and open your dashboard.

Then go to your blogs layout option.

Now click on Add a Gadget.

Here youll find a list of gadgets. Scroll down and select HTML/ JavaScript gadget.

Now copy and paste the following code in the gadget box.

Now save the gadget and refresh your blog to see the result!

<style type=text/css>#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {color:#333333;text-decoration:none;border: 1px solid #CCCCCC;margin:0 3px;padding:3px 7px;background-color:#FFFFFF;}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {color:#333333;border: 1px solid #CCCCCC;padding:3px 7px;background-color:#CCCCCC;margin:0 3px;}
.showpageOf {color:#333;text-decoration:none;padding:3px 7px;margin: 0 3px 0 0;}
</style>
<script style=text/javascript>
var numshowpage=10;
var postperpage =7;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style=text/javascript src=http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js></script>

This gadget will create a number system like below:

Customization of this Code: You can customize the above code as below.

var numshowpage=10; here 10 is the number of pages will be shown. You can use 8, 12 or any number you want.

var postperpage =7; here 7 indicates how many posts will be shown per page. Normally blogger blog shows 7 posts per page. If you wanna increase or decrease the number of posts per page then go to Settings > Post and Comments > Show at most (choose the number you want) > Save settings.

var upPageWord="Previous"; var downPageWord="Next"; the words Previous and Next are the words that will be shown before and after the page number. Actually you dont need to change the word. But if you wanna use other language then you can do this.

Also have a look at the live demo below:

TIPS COM

Saturday, January 10, 2015

How to Add Page Number on Blogger Blog

Stay with Marks PC Solution to get more interesting IT topics!

No comments:

Post a Comment