Change Older and Newer posts with Post Titles for Blogger

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 trick lets your blog visitors to Know Newer and Older posts and they can go to that Posts.This awesome trick done using some jquery script.

Add Jquery Script

Copy and paste the below code before </body>

<br /><!--Start post title http://dailybloggiingtips.blogspot.com --><br /><a href=' http://dailybloggiingtips.blogspot.com '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNA9sj7hcCQ6bJhliB2gj2wY8lYoVtzLFItiHREInUjBkE7CtmHTs2D7-PkqDzKkL86omTXTu_VsvXS7DBAm06fY3WSGU6K-FNcaQR3NcFTICzDaKyLuLjLZYHaXEZcwudpP23gRFO_FE/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://dailybloggiingtips.blogspot.com '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNA9sj7hcCQ6bJhliB2gj2wY8lYoVtzLFItiHREInUjBkE7CtmHTs2D7-PkqDzKkL86omTXTu_VsvXS7DBAm06fY3WSGU6K-FNcaQR3NcFTICzDaKyLuLjLZYHaXEZcwudpP23gRFO_FE/s1600/1x1juice.png'/></a><!--End post title http://dailybloggiingtips.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;}

Please Like and Share if you find this post useful. 

Any Questions relating this tutorial , please comment below

( JMEAEC9RGVS5 )