Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor if you are having a lot of jobs and bloggers readers.Few has some problems with the above script navigation page. Now here is a completely new script and work for numbered page navigation (i.e. Panigation) for Blogger. The paging widget for blogger it easy for the visitor. It is a must have for any new blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.
Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot
Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization
How To Install This Widget On Blogger :-
Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog
Stylish Numbered Page Navigation Widget with Colored Styles For Blogger
Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.
An error was found in some blogs and it is also fixed in this widget.
eg.hiding at top
How To Install This Widget On Blogger :-
- Click the below Button
- Customize the Options given in Widget form
- Click on "Generate" Button
- Finally click On "Add To Blogger" Button
How to Add Numbered Page Navigation Widget for Blogger / Blogspot
Page navigation is awesome widget that allows navigation of page number to the visitors. You might have seen numbered page navigation in many WordPress blogs. It is simple JavaScript that allows your older posts, new posts and links to the house numbers. Have you seen older posts, new messages and links at home bored.
How To Add Numbered Page Navigation Widget to Blogger Blog?
I am giving best customizing options to this widget
Note:-Choose colors for your convenience you feel good.
1.Customize Options in Widget Form
2.Click on Generate Button
3.Then finally Click on Add to Blogger Button to add as a Widget
Blogger Page Navigation Widget With DIfferent Styles
How To Install This Widget On Blogger :-
Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog
UPDATED
Change based on your blog setting :
var postperpage=5;
var numshowpage=3;
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation
Customize Label (if you already use my previous Page Navi don’t use this step)
Go to the Edit HTML page and “Expand Widget Templates”Find this (all of this text in your xml or template)
'data:label.url'
and Replace with this
'data:label.url + "?&max-results=5"'
Change 5 base on how many post every page
Many thanks to Harish for making this code , Some Stylings and PageNavi Script by Abu Farhan and I just tested and modified to work on blogger

goods
ReplyDeleteNo spam please !
ReplyDeleteAssalam.o.Alaikum,
ReplyDeleteGood Blog... Specially I Like The Background Color A Lot ... Its So Simple..
Good Work bro !
ReplyDeleteThe ultimate solution to page number navigation..
Hi, Nice description about Numbered Page Navigation.Thanks, its really helped me......
ReplyDelete-Aparna
Theosoft
Many thanks for the tutorial, but how can I get rid of the page navigation if I don't want it anymore? I can't find anything in the layout section nor in the code, please help :)
ReplyDeleteThanks for sharing such a nice tutorial buddy.... Great Post...
ReplyDeleteNice. Implemented immediately. Thanks.
ReplyDeleteThanks bro working.you can see at techgurusunil.blogspot.in
ReplyDeletei liked your tutorial, it really helps me alot
ReplyDeleteYour Blog is great, each and every article worth millions, it really helps alot...
ReplyDeletethanks for writing such a great tutorials...
very valuable article.it will help us.
ReplyDeleteVery Nice....Thank you dear....
ReplyDeleteThese are very rare tips. Thanks for sharing.
ReplyDeletethaaaaaaaaaaaaaaaaaaaaaaanks
ReplyDeleteOld post, but should help somebody...
ReplyDeleteIt doesn't work with private blogs.
thanks ya infonya menarik bgt
ReplyDeletesip dah infonya, salam sukses gan
ReplyDeletethanks infonya sob
ReplyDeleteNot working from my desktop man!
ReplyDeleteUps. It works like a charm right now! Thank you for the great job, man!
ReplyDeleteExcellent sharing.May You Live Long. ummmmmmmaaahhhhhhhhhhhhhhhh....... :p
ReplyDeleteuseful thanks alott
ReplyDeletehttp://www.ermchen.com/
Awesome Widget...
ReplyDeleteI tried it on 1 of my blog and it's working perfectly.
ReplyDeleteSo simple this is. Thanks to admin...
@Admin:
ReplyDeleteAfter using your code from last 6+ months now I'm facing a problem. If you click anywhere on my blog it'll take you to your blog eg: http:24work.blogspot.com.
What should I do to solve this problem.
Your help is appreciated
hello friend Muneer Hasani
ReplyDeleteGo to Blogger Dashboard >> Layout >> Add a gadget >>
find HTML6 [HTML/Javascript Box]
Remove or delete HTML6 your blogspot blog [HTML/Javascript Box]
....................................................
Now Add A new HTML/JavaScript widget
Now paste the code given below :
.....................................................
<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none} </style>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script style='text/javascript'>
var postperpage=10;
var numshowpage=6;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>
..............................................
And now click Save
broken image completely working....
thanks ! really helped !
ReplyDeleteDownload Latest windows,Mac,Linux,Android Freeware Softwares and Offline Installers Free and fast.
thank you very much
ReplyDeletethank you so much sir...its very good for all of us...thanks once again
ReplyDeleteyeah it helps me alot, thanks google help me to find this useful page
ReplyDeleteYes Good Idea See More In : http://blogger-tuto.blogspot.com/
ReplyDeleteNice article.. Keep up the good work... Thanks for sharing...
ReplyDeleteI would like to thank for creating this interesting blog, so i would like to thank for creating this interesting message.
ReplyDeleteGreat Dear.
ReplyDeleteI like this site because it show some easy ways to create page and blogs. It helped me a lot in various moments for my blog. Thanks for sharing views and ideas of paging in the blogspot blogger. It is really useful to change my page look like wordpress blogs.
ReplyDeleteVa multumesc pentru ajutor, sunteti minunati :)
ReplyDeleteIn your blogger account,First create a post for your homepage, you can give the title as "Home" so that you could know that its for the homepage.
ReplyDeleteWebsite Design Companies | Web Design Companies Bangalore
thanks..its working..tell me about how to add this in the search results in my blog?
ReplyDeleteits working but dont know about how to add this in the search result?
ReplyDeletea really nice widget, thank you for the great job
ReplyDeletenjik good
ReplyDeleteJar4Mobi
thank u so much Harish and team... i have been looking for a very long time... now i have implemented on my blog... http://thefootballhighlightstoday.blogspot.com/
ReplyDeleteVery Nice Work Thnx Bro, Buy/Sale, Or Exchange Money Just Visit : www.paymentbase.com
ReplyDeleteNice and helpful topic. Thanks a lot for your sharing.
ReplyDeleteNice Share
ReplyDeleteThanks share to this post.
Thanks A lot for this tutorial and searching for it fro a long time..thnaks a lot again
ReplyDeleteThank you
ReplyDeletewow thank you, its amazing. visit back in xeanertsdotkbidotordotid, seo trick and tips
ReplyDeleteHello, great blog!
ReplyDeleteGot a question... How do I completely hide the Newer/Older posts from appearing WITHOUT disabling the entire thing rendering it useless?
I ask because, sometimes it will still sometimes appear for me... even under the comment box.
Expecting a message back from you! :P
Thanks again
great site. i really love to visit this site………
ReplyDeleteThis blog is for blogspot tutorial. Also visit SEO Company Noida to get some advanced concepts of SEO in today's emerging trends.
ReplyDeleteniiiiiiiice I was looking for that , finaly my blog with numbered page
ReplyDeletehttp://donhackingarticles.blogspot.com/
Thanks man...i think its very useful for the visitors
ReplyDeleteGod bless you guys on such wonderful work !!
ReplyDeleteRegards,
Priyanka
Nice work. I add to my blog. Thank you very much.
ReplyDeletehttp://emoney-np.blogspot.com
I love this blog.Its a blogspot tutorial blog
ReplyDeleteLuxury guest home accommodation nearest Perth Hill
great.. helped me in many projects thanks for this wonderful share
ReplyDeletei searched alot, but thanks to you i found it here.. pretty though you have a lot of tutorial Sir..
ReplyDeleteThanks
very2 thankyou so much for ur all great tricks
ReplyDeletenice post and also it too usefull....
ReplyDeletethanks a lot more
anna university exam results and question papers
www.technical4u.com
jobs in indian
software jobs in india
www.Jobsearchspot.com
nice post and also it too usefull....
ReplyDeletethanks a lot more
nice working
ReplyDeletefor live tv chennals
http://live-action-tv.blogspot.com/2012/12/ptv-sports.html
for pashto images
http://pashtoimages.blogspot.com
Thank you very much
ReplyDeletescoop
alaamiah
about.me
ترميم البيت
كشف تسربات المياه بالرياض
عزل الاسطح
تخزين اثاث
مكافحة الحشرات
تنظيف خزانات
nice
ReplyDeletehttp://desistreams.net/live-movies/dhoom3-full-movie-online
Thank You Bro! you always help with some good tips,Great work!...
ReplyDeletethank bosss
ReplyDeleteOK
ReplyDeleteThis worked really well on my blog!
ReplyDeleteCheck it out: http://mphotoaday.blogspot.com/
Thank you so much....
ReplyDeleteNice post
Hi There..I used this pagination widget..Its fine on home page but not appearing on labels..Could you please help me out here?
ReplyDeleteGREAT TUT.. LOVE THIS
ReplyDeletewow this is great and simple method to create number page navigation for by the e way I have 2 two blog one is hosted don WordPress but other is on blogger. i will apply these setting for my blogger's blog. Thanks for sharing.
ReplyDeleteSir Please Upload Html Code of numbered-page-navigation
ReplyDeleteIt's so nice and interesting info. I really like the way you discuss your idea on this field. thanks.and visit this site:http://baundole.blogspot.com
ReplyDeleteWorked earlier but does not work now. The widget content is blank so blogger gives the error message. I had it on my blog but removed it later and now I cannot add it
ReplyDeleteI like your website with the deep of heart ( My website is http://eachknowledge.blogspot.com/)
ReplyDeleteGreat post!
ReplyDeletehttp://www.tiranicas.com.br/
thank you, nice tutorial
ReplyDeleteYou have given a great tech. to show the Page Navigator on the Blogspot website.. Thankss...
ReplyDeleteI do work on a IELTS based website.. Please give me a backlink as I have already added you little banner on my homepage.. My Website is . http://www.britishcouncillisteningpracticetest.com/
I love these navigation styles. You put lot of hard work in developing this. Thanks a lot. I will implement this on my blog.
ReplyDeleteThanks,
pnr status
thanks dude. http://www.ariteknik.net/
ReplyDeleteReally nice tool. i found it quite hard, but now i am glad that i found it. thank you
ReplyDeletewat is the content
ReplyDeleteYou do have a colorful guide...it helped in easy understanding. Thanks!
ReplyDeleteI have been really impressed by going through this awesome blog. LAVONA
ReplyDeleteIt is really amazing...Thanks for your hardwork to make it done for us.
ReplyDeleteOne can visit my amazing blog >> http://beb24.blogspot.com
Currently I am using Blogger blog and I want to use Number page navigation for my site. and this pot is very very useful for me. Thanks dear for sharing your experience here.
ReplyDeletethank broo
ReplyDeleteWonderful blog i should say and thanks for your data and thanks for share.
ReplyDeleteOnline Ecommerce Solution
Post Nice
ReplyDeleteThanks for sharing your great ideas. I will try this navigation widget in my blog sites. It's all about the magic of Script and CSS.This post is really helpful for the jargon who are doing job in blog creation , reading blogs and giving ideas regarding blogs for some other websites.
ReplyDeleteReally Love your blog, I'll put one in my blog. Thanks Unusual gifts for men
ReplyDeleteI was looking for this type of page navigation from a long while . Now my blog will also look like wordpress blogspet shop, dog supplies
ReplyDeleteHi Dear, are you truly visiting this web page on a regular basis, if so after that you will absolutely take good experience.
ReplyDeletecan someone email me the code at lucifur2001@gmail.com
ReplyDeleteI was looking for this type of page navigation from a long while . Now my blog will also look like wordpress blogs
ReplyDeletelower left back pain
I was looking for this type of page navigation from a long while . Now my blog will also look like wordpress blogs
ReplyDeletePhuket luxury villas
I'm trying to change the navigation style good
ReplyDeleteThis article can help .... I can read them with new knowledge ... thank you so much for what was given to me
ReplyDeletereally like this, i'll try to use this on my site.....
ReplyDeleteNice blog and its information. I also agree with your views and ideas. Your blog information is very useful for me in my future use?
ReplyDeleteNice Widget but not good the way it splashes links all over someone's blog when the website is loading
ReplyDeleteGreat article brother. I like your effort to discuss all the things step by step and with inforgraphics
ReplyDeleteOn blogger if you have a lot of posts the numbered page is the way you can show your posts that because if you dont use that your all posts will not be displayed. Now that i finde this bog my problems white my sites ar not eni longer a problem. TNX
ReplyDeleteMy blog looks more nice right now: http://www.coroanafunerara.net
Hi, I am confused! can I add pagination to the inner pages (not home page) of blogger ? yes! then how ?
ReplyDeleteGood article
ReplyDeleteSee more at www.apajrlab.com
www.apajrlab.blogspot.com
Excellent work and superb collection of facts. People may think about Search Engine Optimization too. Navigation
ReplyDeleteGood !!!!!
ReplyDeleteGreat. I am searching very well like the info.
ReplyDeletewow....useful tips for me because I'm not so able to do make up! :) you're so precious! Lovely Read! for more visit this website
ReplyDeleteNavigation
Thank you very much, after spending almost 3 hours to get good navigation styles by searching in Google I got yours and finally I am satisfied with this. thanks.
ReplyDeleteThank you so mauch for sharing. I really want to use this widget to my blog too..
ReplyDeleteThanks..... I use this in my blog
ReplyDeletetheme/skin pack for windows 7
I enjoyed the article. very interesting, thank you.
ReplyDeletethank you for this great post!
ReplyDeleteThanks For Sharing This is Awsome Post buddy.Best Whats App Status
ReplyDeleteThank you for this tips
ReplyDeleteThis blog information is eccellent,
ReplyDeletejobs
This is great.... Thank you for sharing
ReplyDeletevery good....nice work ...thank you very much
ReplyDeleteThis is Best ID Card for Numbered Navigation. Useful to integrate In all blogger blog which has more posts than one.
ReplyDeleteIt is just awesome
ReplyDeleteFor Free Bangla E Book Download............
http://allbanglaboi.blogspot.com/
I have read your article thoroughly. I think that will be helpful for the bloggers.
ReplyDeleteonline news in Bangladesh
thanks bro
ReplyDeletehttp://bogracity24.blogspot.com
Thanks for your info.
ReplyDeleteWow awesome. I will try it.
ReplyDeleteThis Page navigation is so beautiful.. I will try it.
ReplyDeleteThanks so so much! love this widget xx
ReplyDeleteit works only on home page .,,, not under labels posts
ReplyDeleteI have added it to my Blastism and its working. To see go to see. thank you admin
ReplyDeleteIt is a must have for any new blogs. read more
ReplyDeletevery nice post help me alot
ReplyDeletehttp://downgamecodes.blogspot.com
Nice Post And Trick Blogger SEO
ReplyDeleteNice Post And Trick Shouted Blog
Thank you very much for this widget.
ReplyDeleteI have use my site
Heart Mirror-Best Software Download-Technique Tuch-Game Download
Thanks, it was simple & the best part did not require any HTMlL change
ReplyDeletegreat
ReplyDeleteThanks! I have searching for this code i tried a lot of such scripts but they didn't worked but this one worked.
ReplyDeletesuperb
ReplyDeleteIt was very interesting for me to read that blog. Thanks the author for it.I like such topics and everything that is connected to them. online jobs
ReplyDeleteঅস্থির! অনেক দিন ধরে এটা করতে চাইছিলাম! ধন্যবাদ ভাইয়া......
ReplyDeleteI have already bookmarked it for future reference
ReplyDeleteWebsite Design Company
i will give it a try
ReplyDeleteIt will be more helpful if followed at once.
ReplyDeletewow works fine visit my blog
ReplyDeletehttp://mixfreedownloads.blogspot.com/
thanks..
ReplyDeleteI have add on my Blogspot
ReplyDeletevery nice work
ReplyDeleteHey Rahul Amin, Hello, can i use this widget into my blog, and use as a tool on my blog readers also , if you permit me.
ReplyDeleteThis is my website. http://www.techora.net/
ok....use this tool
DeleteThank you so much.. Love it!
ReplyDeletei need this trick for my blog
ReplyDelete