I rock, you suck
Donate to my Beer Fund

If you enjoyed/hated my blog/have money to burn/are crazy, why not give me your money?
All you have to do is click on the button above.
No? Well, go on to the posts below, then, you prick.

Friday, June 22, 2007
Blogger Pagination Hack

So. I wrote a pagination hack for my blog yesterday. For the uninitiated, pagination refers to the links on a site that go something like "newer posts" and "older posts". Here are some instructions for anyone interested in using it.

1) Download this. If you run a puny OS like Windows you can unzip it using WinRAR.

2) Navigate to your Blogger Settings page, Formatting tab. Change the "Timestamp format" to the one that says something like "6/22/2007 01:33:55 PM".

3) Host the files somewhere and include them in your blog template. If you do not know how to do that, you can copy and paste the following code. It must be somewhere between your <head> and </head> tags.

<!-- pagination hack includes -->
<link rel="stylesheet" type="text/css" href="http://trashb.in/css/bloggerpaginationhack.css" />
<script src="http://trashb.in/js/bloggerpaginationhack.js"></script>
<!-- end pagination hack -->

You can, of course, choose to omit the comments, but they do make it easier to find and modify/remove code.

4) You also need to include the following javascript variables, again, in your HTML header.

<!-- pagination hack variables -->
<script type="text/javascript">
var datestr="";
var page=0;
<!-- end pagination hack -->

5) Include the following code somewhere within where your post is displayed. Placing it somewhere near your permalink would probably work fine. This updates the variable that stores the date of the earliest post on the current page.

<!-- pagination hack updating variables -->
<script type="text/javascript">
datestr = "<$BlogItemDateTime$>";</script>
<!-- end pagination hack -->

6) Finally, include the following at the bottom of your page.

<!-- pagination hack write newer and older posts links -->
<div id="moreposts">
<span id="new"><a id="newer" href="">&lt;&lt; Newer posts</a></span>
<span id="old"><a href="" id="older">Older posts &gt;&gt;</a></span>
<script type="text/javascript">


It is a crude hack, because I'm not really a javascript hacker, and there is one major imperfection in that the "newer posts" link is really just a back button. I did it that way because apparently the query parameter "updated-min" does not work the way I would expect it to work. However, this guy apparently managed to work it. I had no time to find out how, but if anyone can tell me, I'd be much obliged.

p.s. If you happen to use this code, please post a link to this post or post a comment here telling me I'm cool so that I can know how many people are using it and thereby validate my own existence, k thx.

Labels: , , ,

dude, i hate to break it to you but the older posts button doesn't work...
That was a bug. It should have only appeared on the main page. I fixed it.
very good tool! i used it on my blog:

I tested this and work fine, you save my life.
Later I will place at my blog.

Hi Adrian,
I think if this code works and for labels will be gr8. Now code is ok but if click i label and after click older posts this code doesn't work.

You developed a gr8 code for classic template blogger.
Hi Klodian,

Thanks for the compliments. Unfortunately I do not currently have the time to try adding labels. Feel free to hack on my code, however.

Hi Adrian,
Thank you for quick replay.
Unfortunate I'm not a program developer and I can't do this.

Anyway thanks again, however a bit work from you can make this code an excellent one.

I wish you the best.
Hi Adrian, is me again Klodian,

If you make this code available and for labels I will make a template for you like http://woork.blogspot.com, if you like this template just tell me.

do you happen to know what elements i should change to make this script work with FTP blogger??

FTP blogger dont have the /search/label/ folder, does anyone know where i can locate this in FTP blog??

Thanks for your help!!
Sorry, I have no experience with FTP blogger.
that is okay, my firend. thanks for your reply anyways!!

Cheers for the script. Used it here: Pruned.

This script would work for labels if it could append "/" to the URL. For example:


At the end of each post, Blogger automatically generates the URL without that extra "/". If visitors click those links, pagination won't work.

Meanwhile, on my sidebar, I have manually coded the URL of each labels with "/". Extremely time consuming, but if visitors click those sidebar links, pagination works.

Anyway, thanks again for the script.
@Alexander: You're welcome. :)
you really rock dude!
OMG! Thank you, thank you and thank you! I am looking for this for some days, but all I found applies only to new Blogger and not to the classic Blogger. Thank you again!
Oh, there's a problem, this code have a conflict with the Google Friend Connection code... :\
Me, again! The error is not in your code, is in the google friend code and IE ¬¬ Sorry... And thanks again!
@yokohama: No problem. :)
donaq.blogspot.com; You saved my day again.
It is useful to try everything in practise anyway and I like that here it's always possible to find something new. :)
it is very dificult to choose the best pagination for my own blog
Post a Comment

Links to this post:

Create a Link

Laughing at the cosmic gag reel since March '04!

L.E.W.D (click to know more):

Fred And Phil


Hot Babe Blogs:

Other Blogs (that are not quite as good as mine):


Recent Posts:


To Those Who Wish To Link Me:

Due to the fact that my ego is a humongous, bloated monstrousity, it is not highly unlikely that I wouldn't say no to your linking my blog, so there is no need to ask me.

Winners of Adrian Coolness Points:

The Feisty Bitch: For reasons best known to ourselves. (1)
The Feisty Bitch: For getting featured on the Sunday Times (2)
Adri: For being geeky enough to write recursive prose. (1)
Sheena: For really, really liking my blog. (1)
Sheena: For the use of her finger. (2)
Sheena: For getting on the Straits Times. (3)
Ivan: For referring to me as one of "Singapore's leading bloggers". (1)
Ivan: For coming up with the PubicLicezilla idea. (2)
The Big Fuck: For being such a big fuck. (1)
The Big Fuck: For making the miniature Badge of Lewdness. (2)
Anonymous fan: For making a cool finger. (1)
Celly: For appreciating the genius behind the Pagan Bible here. (1)
Icebreeze: For being wise enough to flatter me. (1)
Barffie: For furthering the LEWD cause by appearing in the papers. (1)
Blinkymummy: For furthering the LEWD cause by appearing in TWO papers within the space of two days, fuckin' A! (2)
Jess: For being observant enough to spot the similarity between Lewdites and Luddites. You rock, babe. (1)
Jiameei: For being my champion against anonymous hecklers. (1)

Powered by Blogger

Ablewise.com Free Classifieds - The Online Classifieds Solutions (TM)

free dating sites

Get custom programming done at GetACoder.com!