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.
Rate this post:
(No Ratings Yet)
Loading ...
(No Ratings Yet) Loading ...
(4.33 out of 5)
Mike, so you’re hiding all posts with js?
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.
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.
Could you show the place for the Script, in Blogger Template?
Thanks!
@Avatar: Linking to my images more than welcome if you are also buzzing my posts! Thank you for asking.
@Miguel: Done. Download the new .ZIP for details on how to implement Blogger .JS Pagination in your Blogger Template.
Looks nice, but do you know how time takes load my 500 posts?
A long, really log, time …
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.
Yeah i think this is suited even for big blogs, but if they are hack & media light.
Where do I upload the files to if I use the advanced blogger method on my own server?
@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.
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!
I’m assuming this technique will only work on self-hosted blogs and not those hosted by Blogger.
@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.
[...] 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 [...]
[...] 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. [...]
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.
Hi Mike,
I’m really confused. I d/loaded it but can’t figure out where it does on my site.
I’ve placed it somewhere, but it’s not working. (Maybe I’m stupid, but the template didn’t help me)
thanks!
love,
elisa
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