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
Thank you so much. Let me share your post.
ReplyDeleteI'm trying to change the navigation style.. Thanks for the tuts.
ReplyDeleteLOVE YOU
ReplyDeleteGood Work bro...!!
ReplyDeletei have no words to say tanks to you but
ReplyDeletea very small word for u THANKS.
thank you very much very nice information or post : mobile prices in saudi arabia visit my blog > http://ksamobile.blogspot.com
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletePlease don't spam,spam comments will be deleted upon our reviews.
Deletethanks 4 ur share. very nice. im added 1 on my blog.
ReplyDeleteThank 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 much for this help. i have added it to my blog and its working.
ReplyDeletehttp://www.funnspot.com
I'm gonna use this widget on my blogger blog..
ReplyDeletei love it
ReplyDeletethanks you site is bast
http://vip-vid.blogspot.com
i am trying to use this all of this vanigator widgets in my blogger but i have no results :(
ReplyDeletenothing appearing in my blog and i cannot navigate to my older or newer pages :( i have big problem
please can anyone hels me ?
my page is kopsekati.blogspot.com
thanks a lot
Nice blogger widget
ReplyDeletebuna ma poti ajuta cum sa fac si eu widget pentru blogu meu
ReplyDeletei implemented it in my blog.pls chk it out.blogforadmins.blogspot.com
ReplyDelete/search/label/
ReplyDelete?????
really so nice post its helpfull blog thx dear
ReplyDeleteIE 8 not working.
ReplyDeleterealy thnk you so much...
ReplyDeletethis navigation bar is realy helpfull...
www.waysofsms.com
thankz for helping me....
ReplyDeletethis is very usefull in website...
plz friends try my website..
http://worldoffunn.blogspot.in/
Great, Ultimate solution for new page navigation. Awesome tips.
ReplyDeleteWooowwwww...
ReplyDeleteThis Page navigation is so beautiful..
I like it Very much....
I don't know how to say thanks....
Huhhhh....
Nice post. Thanx a lot for creating such a beautiful widget.
ReplyDeletewww.getalltricks.in
First off, I want to say how much I love your site!
ReplyDeleteIt is so very informative.
I used the numbered navigation widget on my blog and it worked just fine.
I recently turned my blog into a members only blog and now the widget wont appear! :(
Do you have any suggestions?
Whenever I revert it to public it appears...
Nice blogger widget
ReplyDeletegreat share..
www.kiosbabe.blogspot.com
wow! so good,Thanks Can I ask you How to do these program for blogspot? Thanks for answer back.
ReplyDeleteLove YOU...thanks
ReplyDeletewell i added the page navi in my site..and if i get the list of backlink site...i will inform..
ReplyDeletethaaaaaaaaaaaannnnnnnnnnkkkkkssssssss yyyoooooooouuuuuu.............. LIKE
ReplyDeleteNice and I'm trying to implenent on Index Page
ReplyDeletedemo: Best Music Cover
Thanks :))))))
ReplyDeleteits good but but the page navigation is not shown in the categories
ReplyDeleteThanks...
ReplyDeleteworks perfect!
If any one wants some blogger tricks than visit http://blog-toolz.blogspot.in/
ReplyDeletenice.. thx for sharing :)
ReplyDeletethanks look awesome on my blog. http://filimia.blogspot.com/
ReplyDeleteVery nice and very helpful.
ReplyDeletePlease visit my blog http://danishcoolkhan.blogspot.com
love u and god bless u with truth.
Very helpful information. Thanks.
ReplyDeleteAwesome widget!
ReplyDeletei was Looking for this!!
Many thanks Brother!
your blog is really Gr8!!
TRiCKSme.IN The Technology Blogn
There is still no luck. I have tried many times copying and pasting the HTML/javascript on my blog at the bottom "Add a Gadget". I use the simple version template. Is something to do with "Posts or Pages"? I see only "newer post or older post" at the bottom. Can anyone help me please?
ReplyDelete@Aponpost
ReplyDeleteHi Aponpost,
I wonder if you can tell me how to create a navigation top bar with each category. I am looking for this display on my recipe blog. I really appreciate if you can help.
Hi there, I have added the code to another blog of mine it works but it shows only home page " page 1 of 1" so I wonder if it is something about when I post at "new post" or "Pages". Can anyone explain why is that and what I sould do to make it correctly?
ReplyDeletehey i tried it superve thanks www.andhragallery4u.blogspot.com
ReplyDeleteThanks a lot !!!!
ReplyDeletewww.noncamerasmartphones.com
Are you a new blogger or start your career in online?You will get the the best tutorial,tips and tricks
ReplyDeleteAmazing ... this is awesome blogger Page navigation.. good job beother...!
ReplyDeleteThank you so much for this wonderful widget!!
ReplyDeleteFinally I got it..here is my blog http://thairecipesfrommykitchen.blogspot.ca/
you can get help
ReplyDeleteThanks a lot !!!
ReplyDeletewww.noncamerasmartphones.com
Nice post
ReplyDeleteThank you...
Nice post. Thanx a lot for creating such a beautiful widget.
ReplyDeleteoh thanks for this!
ReplyDeleteTHANKS PAGE NAVIGATOR
ReplyDeleteFREE SPORTS TV!! FREE Amazing 1.5 Software to enjoy all live sports online. Totally Free. Make your PC to SPORTS TV!! Just download and enjoy--- http://goo.gl/oCJmY
ReplyDeleteNice Post, iXenforo - Let's Hack Xenforo
ReplyDeleteposts and your blog is very interesting article, I like this blog, thanks for the info, I will visit again to see your next post and article ....
ReplyDeletesuccess!
ReplyDeletehttp://viecvat.info/index.php
thanKX for sharing here is my blog www.livesportschannle.blogspot.com
ReplyDeletewww.tnetdownloads.blogspot.com
ReplyDeletethis is a amazing blog
http://24work.blogspot.com/ <3 awesome work bro
ReplyDeleteThank You!!
ReplyDelete_________________________________________
khmer blog : http://akbalthom.blogspot.com
Awesome thanks a lot ..
ReplyDeleteGreat tool
www.newstelecom.info
really nice... i applied it for my blog
ReplyDeletewww.alwanserv.blogspot.in
Clients have come to expect a higher level of functionality and interactivity as they visit more and more websites that utilize things like Ajax, and JavaScript. Whilst CSS3/HTML5 has started to step on the toes of JavaScript, JavaScript itself has started to inch into the territory of Flash.
ReplyDeletejavascript jobs
so nice thanx for share this
ReplyDeletenice blog
ReplyDeletepl, visit my blog
+ http://nityasworld.com/
Great !
ReplyDeletethnaks alot... i just implemented this on my blog successfully
Junaid
http://paradigmwisdom.blogspot.com/
Fantastic, thank you.
ReplyDeletehttp://Run19.com my friend's step-aunt made $15620 the prior week. she is making income on the laptop and moved in a $351800 condo. All she did was get lucky and put into action the instructions made clear on this web page http://run19.com
ReplyDeleteWorking perfect on my free music downloads blogger site.
ReplyDeleteThanks boss
ReplyDeletethanks
ReplyDeleteWork From home, Part time Online Jobs From home on without Invesment
ReplyDeletewww.jobzcorner.com
thanks alot
ReplyDeletewonderful code, this is working fine...
ReplyDeletethanks for this tutorial, am making use of it on blogger blog and it is working great.
ReplyDeletewonderful article sir, thanks alot
ReplyDeleteThank you so much fot this page navigator! I have a question thought. Is it possible to change "Page x of x" to another language?
ReplyDeleteThanks!
//E
Hey this is cool thanks for the widget~!
ReplyDeletemybloggertopic
thanks gan sangat bermanfaat ternyata...he
ReplyDeletehey thanks visit my blog www.everypremiumpro.blogspot.com
ReplyDelete.: TQ running on my site...^_^
ReplyDeletenice information http://eadmitcard.blogspot.com
ReplyDeleteThan you so much....
ReplyDeletevery easy to add..
Thanks it is working nice
ReplyDeletehere is demo:http://moviesnpic.blogspot.com/
Thanks......
ReplyDeleteThanks
ReplyDeletehere is my demo:
http://yoncademirel.blogspot.com
Bundle of thanks...
ReplyDeleteI'de one before but suddenly it disappeared few days back he/she had hosted his/her script on goodle code so may be the script is deleted or something like that but now I found ur script which is very easy to install and with alot of styles.
Thanks again :)
.
.
http://sms808.blogspot.com
nice information.....
ReplyDeleteVery nice, thanks pro
ReplyDeleteplease update this for labels because this pages is only for home page i love your site this is very useful site
ReplyDeleteyour site is best in the world i love it love it love itttttttttttttttttttttttttttttttttt thanks here look at my site pcgames827.blogspot.com
ReplyDeleteThanks ! :)
ReplyDeleteFantastic...
ReplyDeleteThanks Admin you are ***** :)
yes very nice i have done every thing
ReplyDeletecheck here
atif3.blogspot.com great funny picture
I Added to my Site Nokia Pinout , Tanks For Share here
ReplyDeletenice post...
ReplyDeletekeep it up.
works great
ReplyDeleteThanks a lot!
nice sit and good working thank a lot.............
ReplyDeleteGood tips to add numbered navigation on blogger. I like the idea of inverted model
ReplyDeletewhere you write the summary first. In
fact, it makes a lot of sense since most people skim though the blog post then decide if they want to read further or hit the back button.
VERY NICE KNOW FOR BETTER VISIT MY BLOG: WWW.TUNEIT.TK
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThanks, man. It works great! :)
ReplyDeleteWow a great work :)
ReplyDeleteThanks for it. Really Works :D
Thnkx a lot..............
ReplyDeleteThanks for the great post! :)
ReplyDeletecool, very impressive i put it on blog
ReplyDeleteA small wooden or metal support is typically called a post, and supports with a rectangular or other non-round section are usually called piers.
ReplyDeleteColumns
thanks u
ReplyDeletevery effective codes. thanks admin...
ReplyDeleteNice it works..
ReplyDeleteCheck out my blog.
www.funalbum.blogspot.com
i like your article, thanks to your sharing!
ReplyDeletekeep spirit!
tank for yourinformation...
ReplyDeleteHi ,
ReplyDeleteI enjoyed reading your blog with my partner. She loves the style and read so many fashion related news.
i want to set my numbered page navigation in my blog then i saw your blog i generate code from here that code work great
ReplyDeletevisit my blog for get tricks tutorial software and much more workingtricks.info
Thanks so much Dear
ReplyDeletethis is really very informative post. thanks for sharing.
ReplyDeleteV.nice sharing. keep it up.
ReplyDeleteif u wana download high quality games then visit my blog
Faboulousgames.blogspot.com
thinks a lot
ReplyDeletehttp://ectheme.blogspot.com
Thanks a lot..
ReplyDeleteHI
ReplyDeleteThank you for Goog Widget
This is the greatest page navigation widget that I've ever found...!
ReplyDeleteits very helpful for me thnkx a lot........
ReplyDeleteWOW... its Amazing Artikel..,, please ComentBack http://genkacyber-pkp.blogspot.com :)
ReplyDeleteThanks now my blog is nice readdy....
ReplyDeleteReally your blog is very interesting.... It contains great and unique information. I enjoyed to visiting your blog. It's just amazing.... Thanks very much for the share.
ReplyDeleteThank a lot...
ReplyDeleteNice website
ReplyDeleteFor blogging tips and tricks, smile, laugh, story, jokes and many more visit this blog
http://honney2bunny.blogspot.in
thanks sooooooo much. it's esy and it works!
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThanx Man , It's very nice ....
ReplyDeletehttp://www.digitalhubinc.com/
Thank you for this tips
ReplyDeleteWell that is a quit good article you have right here that make some things easier to deal with thanks you .
ReplyDeleteThank you so much for your generosity in sharing so many wonderful styles... we're spoilt for choice! I'm terribly joyous, it worked like a charm and looks splendid on my blog. I've gladly referred to your article at my blog post at http://jacqsbloggertips.blogspot.com/2011/04/add-numbered-page-navigation-for.html
ReplyDeleteThanks again.
Owner able admin what i saying about your blog i have no words for saying some thing just i am saying out standing ...Nice article about Navigation techniques. I think this article is so informative and i will follow this techniques in my blog for better seo.
ReplyDeleteMy blog
Cccam Server | Cardsharing
Thanks a lot man its works ...
ReplyDeletethis is my blog bengeek, cooking, and I changed the style ..!!
If you ever wanted to move your blog blogger to wordpress then contact me i will help you. My website address http://geekspage.org/free-blogger-to-wordpress-migration-service/
ReplyDeleteThank you for this tips
ReplyDeleteThanks you for guide this tips
ReplyDeleteNice Sharing Keep it up....
ReplyDeleteVisit my Blog.. Click HeRe
ReplyDeleteWe get good information from your blog.This is a very nice blog New projects in noida extension
This comment has been removed by a blog administrator.
ReplyDeleteapplied this with a little modification...
ReplyDeletehere it is www.droidchicken.com
Pleaase see and comment
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteHow to translate into Russian? Instead "Page __ of __" write "Страница __ из __": http://rb-blog-test.blogspot.ru/
ReplyDeleteSuch an interesting and informative post..
ReplyDeleteMobile Applications
very easy and useful way to create paging in the blogspot blogger.I implemented in on my blog http://wwww.webcodeexpert.com and now it look awesome
ReplyDeleteThanks fоr sharing yοur thoughts on Surνivor Sеason 25 Eρisode.
ReplyDeleteLoad Systems
Thank you very much. I have already added a numbered post navigation. It looks very nice.
ReplyDelete@Lalit Raghuvanshi
ReplyDeleteYou are right. I have added. It takes no time.
thank u so much
ReplyDeletethanks for your site
ReplyDeleteThis is a great post to add number page navigation to blogger. i add this on my blog at www.ghior.com
ReplyDeleteThanks you share with me this nice blog. your blog has a lot of important information. Keep it up..
ReplyDeleteit's amazing...
ReplyDeletei can choose my favourite page number for my blog now with easily.
many thanks for this blog...
thank you!
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?
ReplyDeletewow. i like it. its so easy. thanks for it and sharing..
ReplyDeletePlease don't spam,spam comments will be deleted upon our reviews.
ReplyDeleteIt is usefull blog. I like it too. I share the free post tool to post RSS to blogger at:
ReplyDeletehttp://autoblogpost.trungdong.net/
Happy blogger!
thank you so much for this, it worked.
ReplyDeleteGreat Tute
ReplyDeletehttp://blogginganditinfo.blogspot.com/
thank you very much, im gonna add this on my blog.
ReplyDeletereally like this, i'll try to use this on my site.
ReplyDeleteRemove this code
ReplyDeleteNow find [by pressing Ctrl + F ] this code in the template:
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Previous Product'>« Prev Movie</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' title='Next Product'>Next Movie »</a>
</span>
</b:if>
<span id='home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
Nice man thanks..
ReplyDeleteLove your site man. Helped me in various moments for my blog. Thanks a lot.
ReplyDeleteLOVE YOU MAN REALLY YOUR SITE IS SO USEFULL FOR BEGINNERS I LIKE YOUR WORK FROM FOLLOWING YOU I UPDATED MY BLOG www.myownpcstuff.blogspot.com
ReplyDeleteAPPRECIATED YOUR WORK BRO THANKS..
wow amazing tutorial, thanks bro.. gbu :)
ReplyDeleteThis comment has been removed by the author.
ReplyDelete.thank you click .
ReplyDeletethanks ! really helped !
ReplyDeletehttp://windows4adu.blogspot.com/
Really Love your blog, I'll put one in my blog. Thanks
ReplyDeleteI was looking for this type of page navigation from a long while . Now my blog will also look like wordpress blogs
ReplyDeletewow, this is simply amazing. I have such a numbered navigation one of my blogger blogs but I can sure tell you that this one beats mine. Thanks for sharing this cool tip, you rock. Moreover, I love your blog SEO and SERP.
ReplyDeleteNice THnka for sharing this
ReplyDeleteGreat thanks for sharing this
ReplyDeleteV. NICE VIST
ReplyDeleteHABIBSOFTS.TK
It Helped Me Very Much. thanks.
ReplyDeleteFrom: Movies for mobile
Very nice tutorial, well explained Sir...
ReplyDeleteIt works.
ReplyDeleteYou deserved a thank you.
thank yew so much for this wonderful script see this
ReplyDeletehttp://www.leadsquote.com/
Very helpful. Thank you so much
ReplyDeleteThanks for share!
ReplyDelete-------------------
[URL="http://taigamefree.vn"]Tai game[/URL]
This is a nice plug in, but it changes the posts per page to three where I opt two, otherwise works like a charm, nicely down best regards
ReplyDeletethe best and fast generator
ReplyDeletethanks
looking nice on my blog
but showing only on homepage not on all pages
thanks
www.blissnology.com
Nice blog here! Additionally your web site so much up very fast! What web host are you using? Can I am getting your affiliate hyperlink to your host? I wish my web site loaded up as fast as yours lolinformal sports
ReplyDeleteNice post and really work full.
ReplyDeleteVery helpful tutorial for all bloggers and me also. I am going to use it at my blog http://seotips4fresher.blogspot.in/.
ReplyDeleteThank you so much. Let me share your post.
ReplyDeleteVery nice tutorial, well explained Sir...
Thanks for sharing man its really awesome tutorial... i applied it on my blogs
ReplyDeleteMore TIPS and TRICKS here
ReplyDeletehttp://21lexuz.blogspot.com/
Well , i am very thankful to you !
ReplyDeletesuch a nice widget ...
and i installed it in my website !
" - windows4adu.blogspot.com - "
Thanks
ReplyDeleteCheckout my site www.ohgodfacts.blogspot.com
hi friends if you want language courses then visit at http://www.teamvisionconsultancy.co.in
ReplyDeleteVery nice tutorial, well explained Sir... love it
ReplyDeleteThanx You So Much ...... www.limitedgame.blogspot.com
ReplyDelete