Blogger JS Pagination Hack v1.0
May 2nd, 2006
Since Blogger doesn't want to provide the feature for some reason, here is a simple JavaScript that will achieve the pagination effect you've been looking for on your blogspot.com blog.
Demo:
To see the hack in action, visit Utah Monitor.com.
Features:
- Lightweight (<1.5Kb)
- You can choose the number of posts to display per page
- Each page can still be bookmarked normally
- Customizable design via CSS stylesheets
- still works traditionally if browsers don't support JavaScript (or have it disabled)
- works in current versions of Firefox, Internet Explorer, Opera, Netscape, and Safari.
License:
No license; feel free to implement with your Blogger template whenever you like. All I ask is that you leave a comment/trackback here so others can see your implementation.
Download:
Version 1.0: js_pagination-1.0.zip
Installation:
- Unzip/upload the two files pagination.js and pagination.css to Blogger.
- Modify your Blogger template. You only have to insert four lines into your Blogger template, but where at is the important part.
(see template-example.html: lines 29, 30, 70, and 101) - Change your Blogger Settings.
- Login to Blogger.com
- Settings tab > Formatting sub-tab
- Set it to Show: 999 days on the main page
NOTE: Although the examples provided are for Blogger, it could really paginate anything. Here is a sample demonstrating pagination with an unordered list.
UPDATE:June 16th, 2006 - Added a template-example.html to the .ZIP package.
Bookmark/Search this post with:
Posted in: Development
May 3rd, 2006 at 03:32 AM
Mike, so you're hiding all posts with js?
May 3rd, 2006 at 14:03 PM
Yep. Pretty clever, actually. But the ideal solution would have been for Blogger to provide some support for it. Not sure why they haven't.
June 16th, 2006 at 17:20 PM
@Avatar: Linking to my images more than welcome if you are also buzzing my posts! Thank you for asking.
June 14th, 2006 at 09:29 AM
Hey there Mike, i buzzed this post at my blog. i grabbed the hotlink from one your images, hope it is ok. If not, i will host it myself.
June 16th, 2006 at 16:05 PM
Could you show the place for the Script, in Blogger Template? Thanks!
June 16th, 2006 at 17:21 PM
@Miguel: Done. Download the new .ZIP for details on how to implement Blogger .JS Pagination in your Blogger Template.
June 20th, 2006 at 15:17 PM
Looks nice, but do you know how time takes load my 500 posts? A long, really log, time ...
June 20th, 2006 at 15:41 PM
Yeah, I wouldn't recommend this hack if you have a lot of pages like Caso. That is definately a problem. Not one I have come up with a solution for.
June 25th, 2006 at 05:42 AM
Yeah i think this is suited even for big blogs, but if they are hack & media light.
June 27th, 2006 at 15:12 PM
Where do I upload the files to if I use the advanced blogger method on my own server?
June 27th, 2006 at 19:18 PM
@Greg: It really doesn't matter where you upload them because you'll have to specify the location in the HTML <script> tag, anyway. So just anywhere you (and others) can access them.
August 6th, 2006 at 09:00 AM
This is a tremendously useful hack, that I am really surprised that Blogger does not provide. It is a hassle to scroll back to the archives. People just want to read on. And with this, they can!
August 17th, 2006 at 23:08 PM
@Christopher: Right, unless you can find a way to upload the .js and .css files to your blogger like you can do with images, and point at them that way.
August 17th, 2006 at 20:10 PM
I'm assuming this technique will only work on self-hosted blogs and not those hosted by Blogger.
October 22nd, 2006 at 06:09 AM
[...] For anyone out there who uses Blogger, check out this Javascript hack that provides a flexible pagination solution - a feature that’s not currently built into the Blogger code. The lightweight Javascript has been proven to work in IE, Firefox, Safari, Opera, and Netscape (which means it should work in pretty much anything else you can imagine, as well). The HTML for the pagination is semantic (an unordered list, to be exact) and easy to customize with CSS. Explore posts in the same categories: Javascript [...]
November 3rd, 2006 at 14:38 PM
[...] For anyone out there who uses Blogger, check out this Javascript hack that provides a flexible pagination solution Your comments will be moderated but will appear as soon as humanly possible. [...]
February 2nd, 2007 at 07:43 AM
you rock! I'm going to use this. I was apprehensive about using blogger because the interface is so convoluded with the archives being the only way to go thru the entries. This is going to save me much time. Can't wait to try it out.
March 14th, 2008 at 16:01 PM
you provide that script
i m confused where to put it in html???
pls help
there is no instruction in download. that where to put
pls help me
March 14th, 2008 at 16:03 PM
and i also want to make my post like go to direct page which i like not to next page or previous page
this function provide a wordpress
but i want it in my blogger
March 14th, 2008 at 16:04 PM
and also help to put enable post comment option which is in your site
August 2nd, 2008 at 02:02 AM
I can´t understand how "blogger" has not this "tool" PAGINATION, i don´t believe........
Post new comment