Page Navigation Hack for Blogger (Blogspot)
ADVERTISEMENTS
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.]
Loading ...
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?
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
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
@Gilles -
I checked your blog but could not get what you are talking about exactly.
First sorry for late reply buddy as I was away on a long vacation…
Please let us know if you are still having problem. Also try to give more details.
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..