How to add post title under newer and older links

Sometimes you need to show your readers what are your next or previous posts in your blog. In this casse, the readers will more likely to click on you newer or older post links, and thus you will gain more page views for your blog, more visits, and better rank on Google. How does that sound? It's great, right!. So how do you do it. It's simple, just follow the steps below.

Make sure you back up your template before making any changes.

Step 1: Go to Template => Edit HTML => Proceed => Click Expand Widget Templates box.

Step 2: Paste this code Above/Before </head> tag. (Press Ctrl + F to find </head>)

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

Step 3: Place this code Above/Before </body> tag.

<!--Start post title code http://www.blogonblogspot.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.blogonblogspot.com/">Gadgets By Blog on Blogspot</a><!--End post title code http://www.blogonblogspot.com -->

Step 4: Place this code Above/Before ]]></b:skin> tag.

.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 5: Save Template