Change Older and Newer posts with Post Titles for Blogger

Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This Awesome Blogger Hack lets your blog visitors to Know Newer and Older posts and they can go to that Posts.I got this hack from YABTB blog .This hack is done by MS-potilas of YABTB blog.All credits goes to YABTB.  This awesome trick done using some jquery script.

Add Jquery script

• Copy and paste the below code before </body>

<br /> <!--Start post title http://netoopsblog.blogspot.com --><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyv9TdQIlxMzCaKRslebeFphWVTFsYb2AJi1mm1OclFvwJ5SGB32RSgAmA1EzQlIqcKvOOc_tgOWPAnhX94zQt6TURUWvVjAr0uGLRKoSkvI-ob5ocLqgvRx3LQv78U_XvDb8tYH8jYk/s1600/1x1juice.png'/></a><br /> <b:if cond='data:blog.pageType == "item"'><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("<< 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 >><br />"+b)}}},500)});/*]]>*/</script><br /> </b:if><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyv9TdQIlxMzCaKRslebeFphWVTFsYb2AJi1mm1OclFvwJ5SGB32RSgAmA1EzQlIqcKvOOc_tgOWPAnhX94zQt6TURUWvVjAr0uGLRKoSkvI-ob5ocLqgvRx3LQv78U_XvDb8tYH8jYk/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->

Add CSS code

• Add the following css code before ]]></b:skin> (Add CSS code another way)

.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;}

Tweet