Pages

Wednesday, June 27, 2012

23

Add Post titles to Older and Newer Post links – reloaded

When viewing a single Blogger blog post there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger...

Previous hacks

There are already some hacks to do this. One of the first is by ETBlue, here's that hack. It works very well, but it skews the stats: the loading of two extra posts by jQuery results in two extra stats hits for an opened post.

I did a hack, too, which adresses the stats problem, it is here. It uses somewhat different method to get the post titles: they are fetched from the blog feed, or generated from the blog url (=pseudo title), so no extra posts are loaded, so we have no stats skew. The problem is that is only gets real titles for 500 latest posts. Older posts get a pseudo title. 500 is sufficient in most cases. The script could be modified to get 1000 posts, or more, but it would take some time to load the feeds.

In a comment of my previous hack Duy Pham gave a link to his Older/Newer post title hack. He has an excellent solution for getting the titles from the blog feed: first get the index using publishing date of the post, then retrieve maximum of 3 posts (previous, this post and next post) from a feed.

Duy Pham's hack was so inspiring, that I started coding the thing same in jQuery (Duy uses javascript), and to be compatible with my previous hack. The result has 2 lines less code than the previous hack, and many more features:

Post titles to Older and Newer Post links – reloaded


Installing the hack

You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Then find </body> and insert this code (just) before it:



If you had the previous version installed, you can replace the old code. Save the template, and the hack is installed!

Configuration

You can configure the following javascript variables:

olderLink - contains the template for older link, you can use [title] in this
newerLink - template for newer link, you can use [title] in this
olderTitle - template for older link title, you can use [title], [date] and [datetime] in this
newerTitle - template for newer link title, you can use [title], [date] and [datetime] in this

You can use any html, too, for example you can use images. If you use the default olderLink and newerLink, you can also style classes .blog-pager-older-link-title and .blog-pager-older-link-title.

The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
If you don't have Simple template, test and change styles if needed. Values for .home-link work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works). Of course you can style everything quite differently than me, that's just CSS. :)

Hope you like this hack!
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

23 comments:

Anonymous said... [reply]

good post, I don't understand this :p

Anonymous said... [reply]

Good Job, MS-potilas.

Beben Koben said... [reply]

use json it's loading takes quite a bit longer time only to call a title!

nice hack maste :)

Sinto said... [reply]

Hi MS-potilas I have a tutorial request....??,

how to get the relative url of the image we upload on blogger, so that we can write the url like this on my blog

<img src=’iklan.jpg’/>

with the original url like this

http://2.bp.blogspot.com/-fl3_RRy-fm4/T3LAUw7OYvI/AAAAAAAABUM/CKXelnuy4d8/s1600/iklan.jpg

Thanks Before

MS-potilas said... [reply]

@system of blog
Hi, I'm afraid that it is not possible - the images are stored in different (sub)domain, so relative paths are not possible, you must always use the full path.

Sinto said... [reply]

@MS-potilas

does not use javascript ..?

MS-potilas said... [reply]

@system of blog It won't help, you'll still have to use the full absolute path.:(

Sinto said... [reply]

@MS-potilas

Ohhh So that, thanks for information :)

Olo said... [reply]

Hi you, i just want to show only the title on hover, not the date of post, and some code unnecessary should be removed, like this: title = title.replace('[date]', date.toLocaleDateString()); since i think it can make my website loading faster. Thanks you

MS-potilas said... [reply]

@Olo
Hi,
yes, you can remove that functionality, just remove four lines from the script, lines 19-22. :)

Unknown said... [reply]

Hi! Thanks for the code. Is it possible to display the title of the post without the Newer Post and Older Post remarks? :)

MS-potilas said... [reply]

@Daniel Benny Simanjuntak
Yes, you can alter what is shown by modifying the variables olderLink and newerLink.

Unknown said... [reply]

@MS-potilas
Thank you so much, sir. It sure looks awesome! This is what I am really looking for. :)

Dvolatility said... [reply]

Hi MS-potilas, thanks for helping me out with this great feature. I was just wondering if there was a way to center the Home button on mobile devices. For example, if I calculate the margin so it centers on my Chromebook, it will look out of whack on an iphone. It is just the home button that messes up. I changed the code so the older/home/newer links look the same on all devices, but the home button is way to the left or right when an older or newer link is missing. Do you know if there any way to just center the Home button without using margin?

Thanks,

MDV

MS-potilas said... [reply]

@Matt Dvolatility
Hi,
unfortunately I'm not very familiar with CSS, so I don't know the best way to center the element (link) when there either is or isn't an element on left and right sides. Maybe some absolute positioning?... Something like the last example here: sitepoint.com/css-center-position-absolute-div/ But I'm really just guessing here... Hope you get it done some way.

Dvolatility said... [reply]

@MS-potilas

Thanks for your reply. Your example in your post works well on my Chromebook (I figured out the margin-left px that works best), but it doesn't seem to work on my iphone/ipad. I think when they resize my template to fit the screen, the absolute px makes the home link shift more to the right. I'm guessing on that though. I tried to make my site fluid once but it didn't work on mobile devices as well. Thanks for the link to that site. I will try to figure out how to fix this issue.

MDV

Dvolatility said... [reply]

@MS-potilas

I figured out how to fix it with that link you gave me. Not sure if it works on IE though. I added position:relative; to #blog-pager, and then added left:50%; position:absolute; text-align-center; to .home-link and it somehow worked on iOS devices. Thanks!

Chandrakshi Creation said... [reply]

Hi

Thank you for this helpful tutorial, I was wondering if it would be possible to add a thumbnail (first image from the post) and post summary to this along with the post title?

MS-potilas said... [reply]

@Chandrakshi Creation Hi,
yes I think it is actually possible. I'll put it on my todo list and get back if I succeed making it.

Chandrakshi Creation said... [reply]

@MS-potilas

Hi

Thank you very much MS-potilas for the quick response am eagerly looking forward to your tutorial on this.

Thank you

Chandrakshi Creation said... [reply]

@MS-potilas Sorry for responding lately as I had not checked my other mail for quite some time. But thank you so much for this helpful trick you are a genius really appreciate the fact that you kindly accepted my request. Thank you once again and I shall implement this trick ASAP.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: