How to add post title under newer and older links

H

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

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

About the author

domdom rung

1 comment

By domdom rung

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives