Most of the people think that page navigation hack is only for who blogs at WordPress. But here is the hack for those who use blogger and want to add page navigation to their blog. This hack will show page number instead of text link older posts, as shown in following screenshot.
You can see live demo here.
Now this involves two things – adding some CSS code and javascript code to your template. All steps are explained below.
Steps:
- Log in to your blogger account and navigate to Layout section. Now go to the Edit HTML tab.
- Search for line
]]></b:skin> - Add CSS in this file above that line.
- Now search for this code or related in your template (no need to expand widgets)
<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>
- Now add javascript codes in this file just after code:
</b:section> - Thats’s it. Save changes and you go!
Mods:
In javascript codes in this file, find line…
var pageCount =5;
The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.
var displayPageNum = 3;
Here the digit in red represents number of pages to be listed. Change the digit to list as many pages you want.
That’s it now we have added Page Navigation menu hack to our blog successfully
Your Comments are appreciated.. Β π
(Credits: Muhammed from RTW)
Related: 6 WordPress Plugins for Better Navigation and User Experience
[Editor Note: This is first post by Arjun Kumar on this blog. Arjun is just 16 year old and that make him youngest Devil in team DW. He is working hard on our new project OrkutBuddy, dedicated for orkut users.
If you like to write for Devils Workshop, please check this. Details about our revenue sharing programs are here.]
69 Comments
Hey really good hack thanks for the hack
@ Arjun:
Dude please change the colors of the Ads as recommended by our Devil…
Those colors really look very bad on this theme π
Amazing!
It worked like a charm!
DW should have more posts like these. Crisp, precise to the point & very easy to use!
And Arjun, Great Post! We look forward to more posts like this.
Not working for me π
What may have went wrong?
Try this code. It works for me.
Use the CSS given above and then do this.
replace with
<script type=’text/javascript’>
var home_page="/";
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=4;
var upPageWord =’Prev’;
var downPageWord =’Next’;
</script>
<script src=’http://bvtstv.googlecode.com/svn/trunk/bvtsts.js’
type=’text/javascript’></script>
it dint work for me friend….it does not show any parsing errors in the xml template but still….it does not work…donno why?…
@Maxpayne – Thanks..
@ Abhishek and @ Rohit
Some reason may be that the var pagecount=5; and the number of posts in main page of the blog which is to be edited in formatting tab in setting may be not the same..
just check that and reply back..
@Deepak –
Changed the code..
π
Incredible, dear friend. Excellent hack. It works just fine. Thank you.
@arjunskumar47 –
Now it looks great π
@Ciprian –
Thanks..
This is working fine. But not showing all the posts of labels. I m using this is Blogger. Is there any way to solve this problem.
@Souras – It will show. It should show.
Hello
http://atablechezclaire.blogspot.com => 6 posts, 5 on the 1st page, you can’t see the posts on 2nd page : no post listed.
Any dea why ?
Thank you π
@Gilles –
First sorry for late reply buddy as I was away on a long vacation… π
I checked your blog but could not get what you are talking about exactly.
Please let us know if you are still having problem. Also try to give more details.
Tried this hack, and a similar one on blogger buster, and both make some posts vanish at the beginning of each new page…
Is there a bug somewhere?
thanks for the hack
@arof –
Welcome π
This isnt working for me. Nothing appears. the blog post widget in page elements is set to show 5 blogs in a page. Any ideas??
@j0e –
Did u install the script in correct place.?
yes i did.. Just confirming.. Am i supposed to paste the 2nd javascript codes BEFORE or AFTER /b:section??? I did both..
@j0e – Paste the JS file after
it is clearly mentioned in the post..
Not working on my site.Tried both methods
not working yaar
no change in my blogspot
Nice one.
great widget ……….
but it couldn’t working fine….
i installed this widget i think u r the real hacker of the code i found it on some other blogs those just modified css of this…
i like the above navigation style that’s why i use it….
” the problem is when i navigate to next or 2 page it navigates some far and it displays only some posts only ”
just check the below blog and use navigation to understand …..
http://funevil.blogspot.com/search/label/Animal%20Pics?max-results=5
Thanks in ADV
From http://funevil.blogspot.com/
Hi,nice hack but I wanna show this on my homepage too.While this hack works well from the second page the 1st page(homepage) still shows a small older post link.
How can I sort it out????
iam getting a problem that when i press 2 nd page or other page links iam getting sorry no posts matching your search
when shoosing a label with more than 20 posts, the rest of the earlier posts are not showing?
Any solution?
I maked page naviation for blogger in my blog.This is my blog :Sayfa NumaralandΔ±rma
can u please tell me how to get page navigation widget like yours i don’t like the one that you have posted in article i like your working page navigation….
hi its not working fine when click on 2nd page it goes to sixth page and it is creating problem why
http://softline4all.blogspot.com/
Sorry to Say friend!
But this isnt working on my blog!
http://www.tricksterminal.com/
Any Idea??
its working but not for search pages. can you do it for search pages.
good tips
Thank you very much π Working fine!
It would be better if you guys include navigation to search result also…
it really works,great hack dude………keep it up i ll keep on checking ur site for updated hacks……..u rock….
Super thanxxxxxxxx
Nice oNE………
Thanks so much for the great tutorial!
All works fine now!
!working code!
http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-problems-solved/
thanks a lot dude, now workin for my dummy.
cool, you rock π
Yes, man i hav done it
Thank u so much
hey buddy this is a great tutorial =D
i would like to ask ur permission to post this tutorial on my blog.
i’ll link it to ur page.
do send me an email if u give me that permission.
thanks
Hey Buddy
Thanks -working fine π
Working link : http://www.420sdna.com/search/label/Wallpapers
@gryphon14
You can always do that. But do refer links properly.. π
Thanks working fine
not working for me, i dont see numbers match the post that i desided to show in each page , just show all of them, besides, no next or numbers at the bottom of the page to go to next
thanks buddy,work for me π
I also changed the formating to 3 posts as in the JS.. but nothing happpened
Thank u so much π
for more time i looking for this… thanks so much……
my blog does not show page numbers under different labels… but working on homepage…what to do??
i have the same problem dude
Now the problem has been eliminated
it is not working
man this one is sick i was finding it from so many days now i got it thanks devil workshop..!!
my blog does not show page numbers for different labelsβ¦ but it is working on homepage effectively β¦and looks nice too what to do??
i think Gurinder also have the same problem
Plz help us
following are the pages
Home Page
Label Page
Thanks Nice Tips
Nice tip thnx
i have used on my blog
thanks for yr information,I will try and learn to be hacker
HEy i install this page navigation in my blog
http://www.aashuzone.blogspot.com
i have more than 1000 post but it shows limited posts only
now i have maxsearchresult 5 and it show only 101 or 100 pages only…………..
there is any solution
its working …
here’s the proof http://freemobilegameshere.blogspot.com/
Nice…but not working π
i follow your code. but i still not do Navigation on my blog
umm.. i had to ask if we can add the reply to individual comment type button used in here in blogspot blogs?
i love it.thanks for the hack. π