Change/Replace Older And Newer Posts With Posts Title Link On Blogger

This is another bloggers hack which i have been expecting since all this while, and i feel that replacing your older and newer posts with post title is another great way of improving your pageviews, impressions as well as ranking, because this hack will show your readers your next and previous post with post title and not the ordinary default older and newer text, this may also force your readers to click on the links if the title sounds like what they need and they stay much longer on your blog which will definitely reduce your bounce rate.

Below is the preview of how your older and newer post will appear after replacing it with your posts title.

How To Replace The Older And Newer Post With Post Title

• Go to your blogger dashboard
• Click "Design" > "Edit HTML" > back up your template
• Mark/Tick "Expand Widget Templates"
• Use ctrl F to find </head> and paste the following code above/before </head>

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

Note: If you have already included jQuery in your template before, then skip the search above and move to the next search.

• Now search for </body> and paste the following code above/before </body>

<br />
<!--Start post title http://www.realcombiz.com --><br />
<a href='http://www.realcombiz.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.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(a){var b=a.match(/\/([^\/_]+)(_.*)?\.html/);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)}}},500)});/*]]>*/</script><br />
</b:if><br /><a href='http://www.realcombiz.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><!--End post title http://wwwrealcombiz.com -->

• Now search for ]]></b:skin> and paste the following CSS code before/above it

.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;}
#blog-pager{height:100% !important;}

• Click "SAVE TEMPLATE" and you are done, check below to blog post to see the awesome changes.

Hope you enjoy this? Take few seconds to share it with friends/followers and subscribe to this blog for you to receive all our latest post directly into your email, but don't forget to confirm the confirmation message sent to your email.

Enjoyed This Post? Subscribe For More Update!

Follow @realcombiz