Adding Post Titles To Older Post Newer Post Links On Blogger

Posted : Wednesday, February 15, 2012  | Post Author : Paul Crowe | 37 comments

Adding Post Titles To Older Post Newer Post Links On Blogger

One WordPress feature i really like that is not available on Blogger is last post, next post links at the foot of the page with the actual titles of the posts they link to.On Blogger we have got Newer Post, Older Post links but the title of the post is not shown.I feel these links would get a super increase in clicks if the titles were connected.With simply “Newer” and “Older” people don’t know what they are clicking the titles will catch the eye and thus entice more clicks.The knock on effect of this will see more page views that will lead to more return visitors, subscribers and followers.

I said this feature was not available on Blogger, that is until now.A few people have created hacks to add the titles to the older, newer links including myself but every time it had errors.However one hack i have seen does the job perfectly.

The awesome “Yet Another Blogger Tips Blog” i stumbled upon recently has some very cool Blogger hacks and you need to check it out.This tutorial comes from the author of YABTB with the username “MS-potilas”.Check out the screenshot below, you can see a demo on this blog by scrolling to the bottom of this post below the comments.

 

Add Post Titles To Older Post Newer Post Links On Your Blog

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. – Adding the jQuery, skip this if you previously added jQuery to your template Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

</body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

<!--Start post title code http://www.spiceupyourblog.com -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(//([^/_]+)(_.*)?.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
href = href.replace(/.blogspot.[^/]+//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("<< Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
href = href.replace(/.blogspot.[^/]+//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post >><br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if><a href="http://www.spiceupyourblog.com/">Gadgets By Spice Up Your Blog</a><!--End post title code http://www.spiceupyourblog.com -->

Step 5. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

]]></b:skin>

Step 6. Now Copy And Paste This Code Directly Above / Before ]]></b:skin>

.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;}

Step 7. Save your template.

I think this is an awesome addition to any blog and will keep visitors on your blog longer looking through your archive.I intend on adding another post with a tutorial on having the next post and previous post titles at the bottom of current posts below the last line of text or at the top before the first line of text.Make sure to check out more of our Blogger Tips.

37 comments:

  1. nice post
    i’ll try it…

    ReplyDelete

  2. Hm, it’s not working for me yet…Maybe only suitable for blogger-intern templates?

    ReplyDelete

     

    Replies

     

  3. It should work on most templates, it will take a few seconds to load as it’s position in your template is the last to load.

    Delete

  4. Ahh, I only just realised – it works on the individual blog posts. As I have different layout on the homepage I was confused.

    Thanks! 🙂

    Delete

  5.  

  6. just add it to my blog. works great! tq 🙂

    ReplyDelete

  7. You are just awesome Paul! Just the thing i wanted, Thanks! and works perfectly.

    ReplyDelete

  8. Thanks, will have to try this one out later!

    ReplyDelete

  9. Really awesome , have implemented it my blog

    ReplyDelete

  10. Another useful tip. Applied to my blog too 🙂 Thanks !

    ReplyDelete

  11. Nice, works better than the one I was using which caused the pageviews in blogger to be really inflated!

    ReplyDelete

     

    Replies

     

  12. Yeah i tested that one as well and it was messing up the stats, glad you like it Jon..

    Delete

  13.  

  14. Thanks Paul. It works!

    ReplyDelete

  15. Thanks Paul! This was it for which i was looking

    ReplyDelete

  16. i am having problem with it, it is not showing the full title of the next and previous.
    you can have a look on my blog
    Any help?

    ReplyDelete

     

    Replies

     

  17. Ankit i checked out “nsmsolutions” and it works fine.If your post titles are extra long it may place the newer link lower as there is not enough room.In step 6 the Css code you can decrese the font size from 90%..

    Delete

  18. hmm, i haved changed the width in css code & font size before seeking help from you, still not working !
    Any other suggestion, please.

    Delete

  19. Same issue as Ankit… Need to change width to allow post title to be displayed on a single line but changing the width in step 6 does nothing. Any suggestions?

    Delete

  20.  

  21. Nice tip. Have implemented it on my blog.

    ReplyDelete

  22. Very nice post. Thanks for publishing these hacks which make blogging experience on blogger more entertaining.

    ReplyDelete

  23. Thank you for sharing!

    ReplyDelete

  24. its awesome dude,weldone

    ReplyDelete

  25. Really nice trick! I will must try it on my blog.

    ReplyDelete

  26. very useful trick. but theres a 1-2 second delay before the titles are reflected and it was truncated..

    heres my blog http://corbylove.blogspot.com

    ReplyDelete

  27. Chicky a.k.a. KadduMarch 20, 2012 at 7:35 AM

    Hi Paul! Have you used this same code on your blog here? When I tried it on mine, it just seemed to convert the post URLs into text. But since blogger strips prepositions and special characters in the post URL, the code didn’t show the actual post title. Also, longer titles show up incomplete, with trailing “…”, whereas here, I see complete post titles. How do I get complete post titles?

    ReplyDelete

  28. Hi Paul very nice trick, working very well but I have a problem, the letters appear normal but have a color like you see in the picture http://dl.dropbox.com/u/3475149/Test/foto.png or or take a look at my blog

    ReplyDelete

  29. It really works.thanks paul

    ReplyDelete

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

    ReplyDelete

  31. Cynthia Rodrigues ManchekarJuly 24, 2012 at 12:45 PM

    HI, I tried this, but it’s not working on my blog. I’d appreciate it if you could let me know how I could rectify this.
    MY blog is http://cynthology.blogspot.in

    ReplyDelete

  32. Thanks so much for this code. Many of my fellow bloggers use WordPress, and I really enjoyed their named links. Now I can be as cool as them! I’ll probably be following your blog now.

    ReplyDelete

  33. thanks for this tip, i have added to my blog already, it sure looks awesome!

    ReplyDelete

  34. cool will give it a try

    ReplyDelete

  35. O thank you very much… this is what I am really looking for

    ReplyDelete

  36. Worked super fine 🙂

    ReplyDelete

  37. It works, and really easy to install, thank you.

    ReplyDelete

  38. Wow, it worked perfectly!!! How about if I wanna show images instead of text only? Thanks a lot!! (I’ve found a way switching “Home” to image, but didn’t work for “older” & “newer” one…)

    ReplyDelete

  39. Duchess BerrybunnyFebruary 2, 2014 at 5:51 PM

    Awesome, but how do you replace those links with images?

    ReplyDelete

  40. awesome! Thanks man

    ReplyDelete