Posted : Wednesday, February 15, 2012 | Post Author : Paul Crowe | 37 comments
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
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:
nice post
i’ll try it…
ReplyDelete
Hm, it’s not working for me yet…Maybe only suitable for blogger-intern templates?
ReplyDelete
Replies
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
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
just add it to my blog. works great! tq 🙂
ReplyDelete
You are just awesome Paul! Just the thing i wanted, Thanks! and works perfectly.
ReplyDelete
Thanks, will have to try this one out later!
ReplyDelete
Really awesome , have implemented it my blog
ReplyDelete
Another useful tip. Applied to my blog too 🙂 Thanks !
ReplyDelete
Nice, works better than the one I was using which caused the pageviews in blogger to be really inflated!
ReplyDelete
Replies
Yeah i tested that one as well and it was messing up the stats, glad you like it Jon..
Delete
Thanks Paul. It works!
ReplyDelete
Thanks Paul! This was it for which i was looking
ReplyDelete
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
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
hmm, i haved changed the width in css code & font size before seeking help from you, still not working !
Any other suggestion, please.
Delete
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
Nice tip. Have implemented it on my blog.
ReplyDelete
Very nice post. Thanks for publishing these hacks which make blogging experience on blogger more entertaining.
ReplyDelete
Thank you for sharing!
ReplyDelete
its awesome dude,weldone
ReplyDelete
Really nice trick! I will must try it on my blog.
ReplyDelete
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
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
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
It really works.thanks paul
ReplyDelete
Hi! Thanks for the code. Is it possible to display the title of the post without the Newer Post and Older Post remarks?
ReplyDelete
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
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
thanks for this tip, i have added to my blog already, it sure looks awesome!
ReplyDelete
cool will give it a try
ReplyDelete
O thank you very much… this is what I am really looking for
ReplyDelete
Worked super fine 🙂
ReplyDelete
It works, and really easy to install, thank you.
ReplyDelete
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
Awesome, but how do you replace those links with images?
ReplyDelete
awesome! Thanks man
ReplyDelete