Add Numbered Page Navigation For Blogger in 2 Steps Only!
In older blogger templates there are only two buttons with older and newer posts at the bottom of the posts page (homepage). This is somewhere looks very crappy and we should have to change this type of navigation to numbered page navigation for blogger.
Previously I have shared a lot of best blogger widgets and also a lot of best blogger templates of all sorts such as flat blogger templates, ecommerce blogger templates and some others. But today I am going to share with you a best designed numbered page navigation for blogger.
I am going to share with you best styled numbered page navigation widget for blogger. This numbered page navigation widget will make your site's navigation easy for your readers to walk through your posts.
Previously I have shared a lot of best blogger widgets and also a lot of best blogger templates of all sorts such as flat blogger templates, ecommerce blogger templates and some others. But today I am going to share with you a best designed numbered page navigation for blogger.
I am going to share with you best styled numbered page navigation widget for blogger. This numbered page navigation widget will make your site's navigation easy for your readers to walk through your posts.
How to add numbered page navigation for blogger
The process of adding the page navigation widget into blogger is very easy this includes only two steps- Adding CSS
- Adding Jquery
1# Adding CSS
For this first of all go to your blogger dashboard
Click on template
Then click on edit HTML
Now search for this ]]></b:skin> tag
After finding, now copy the code below and paste it just below the ]]></b:skin> tag.
/*-----------------numbered page navigation for blogger by PakMax------------------*/
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
/*-----------------numbered page navigation for blogger by PakMax------------------*/
2# Adding Jquery
Now to add jquery do the same steps as we did for adding css.
Go to blogger dashboard
Click on template tab and then on Edit HTML
Now search for the </body> tag
After finding it simply paste the below just above it:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>
Customization
After adding the code you can do some changes with the widget by making some changes in the code and these are
- You can choose how much posts will be displayed per page by changing value of "var numperPage=7" to what which you want
- You can choose how many pages will be shown in the navigation widget. For this change value of "var numPages=6" to what ever you want.
- You can also change the text of Next and Previous button by editing these two lines: "var prevText ='« Previous'; var nextText ='Next »';"
Final Words
I hope that you like this widget and hope that this widget will adds a new life to your blog. Let me know if you have any problem with the installation or the widget will not working properly on your blog.
Add Numbered Page Navigation For Blogger in 2 Steps Only!
Reviewed by Maher Afrasiab
on
6:53:00 pm
Rating:

not work in my site :(
ReplyDeletehttp://www.shayari7.com
not work in my site :(
ReplyDeletehttp://www.shayari7.com
bro but you already have numbered navigation that's why it is not working. To add this one you have to delete the first one from your blog and then implement this one.
DeleteHello I'm Menghong I want ask you about blogger. I difficult to upload in pages or in category in blogger,so can you help step Numbered Page Navigation only pages.
ReplyDeleteHello,
DeleteI will share a complete tutorial on this. And will be published soon.. (c)
Sir i cant search ]]>
ReplyDeletein my html of template?
keplergames.blogspot.com
Try to search via blogger built-in search which you can access via CTRL+F. An in search box paste "]]>" and hit enter and you surely find it.
DeleteNot working Bro...
ReplyDeletehttp://pricelistbd57.blogspot.com/
now check I have changed the script, now it should work fine :)
DeleteIt's only work on homepage but not work on label pages... check my site http://www.videoforest.net/
ReplyDeleteThanks for nice sharing about add page number navigation widget. It is excellent post for add nice page navigation in blogger blog. I must use this post for my site.
ReplyDeleteThanks again.
its only work on homepage ,
ReplyDeletenot work on label,or archive
this article is "how to add numbered page on homepage in blogger"
DeleteNot working on the movie download site.
ReplyDeletehttp://moviehous.com
another code please.
Not Work br0... plzhelp me yr its too eagent _/\_
ReplyDeletenot working bro
ReplyDeletehttp://www.alwaysgoinnovative.com/
Excellent blog
ReplyDeletepython interview questions
git interview questions
django interview questions
sap grc interview questions and answers
advanced excel training in bangalore
zend framework interview questions
apache kafka interview questions
uipath training in bangalore
Nice blog
ReplyDeleteuipath training in bangalore
angular4 interview questions
python interview questions
artificial intelligence interview questions
python online training
artificial intelligence online training
I got nice blog
ReplyDeletesap partner companies in bangalore
sap implementation companies in bangalore
sap partners in india
aws staffing
jquery interview questions
sql interview questions
very nice interview questions
ReplyDeletevlsi interview questions
extjs interview questions
laravel interview questions
sap bi/bw interview questions
pcb interview questions
unix shell scripting interview questions
hr interview questions
really awesome blog
ReplyDeletehr interview questions
hibernate interview questions
selenium interview questions
c interview questions
c++ interview questions
linux interview questions
spring mvc interview questions
ReplyDeletemachine learning online training
servlet interview questions
mytectra.in
Thank you for sharing this type of interview questions
ReplyDeleteIot Online Training
Itil Interview Questions
Salesforce Interview Questions
Msbi Interview questions
Salesforce Interview Questions
C Interview Questions
aws partners in bangalore
aws partners in india
aws service providers in india
aws service providers
Nice Blog
ReplyDeletesap partner companies in bangalore
sap implementation companies in bangalore
sap partners in india
aws staffing
Your good knowledge and kindness in playing with all the pieces were
ReplyDeletevery useful. I don’t know what I would have done if I had not
encountered such a step like this.
aws training in bangalore
aws training in chennai