Adding Post Titles To Older Post Newer Post Links On Blogger




| 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 == &quot;item&quot;'>
<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("&lt;&lt; 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 &gt;&gt;<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.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

37 comments:

  1. Hm, it's not working for me yet...Maybe only suitable for blogger-intern templates?

    ReplyDelete
    Replies
    1. 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
    2. 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
  2. just add it to my blog. works great! tq :)

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

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

    ReplyDelete
  5. Really awesome , have implemented it my blog

    ReplyDelete
  6. Another useful tip. Applied to my blog too :) Thanks !

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

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

      Delete
  8. Thanks Paul! This was it for which i was looking

    ReplyDelete
  9. 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
    1. 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
    2. hmm, i haved changed the width in css code & font size before seeking help from you, still not working !
      Any other suggestion, please.

      Delete
    3. 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
  10. Nice tip. Have implemented it on my blog.

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

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

    ReplyDelete
  13. 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
  14. 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
  15. 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
  16. It really works.thanks paul

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

    ReplyDelete
  18. 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
  19. 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
  20. thanks for this tip, i have added to my blog already, it sure looks awesome!

    ReplyDelete
  21. O thank you very much... this is what I am really looking for

    ReplyDelete
  22. It works, and really easy to install, thank you.

    ReplyDelete
  23. 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
  24. Awesome, but how do you replace those links with images?

    ReplyDelete
  25. awesome! Thanks man

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us