How to Add Post Titles to Newer and Older Post Links

Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This is an Awesome Blogger Trick that lets your blog visitors to Know Newer and Older posts on Your Blog and they can Easily Skip to that Posts.This awesome trick done using some jquery script.But Iam Not Sure that It Works with all Templates.Some Templates Doesn't Support this Trick.So Let's See How to Do it.


Make Sure to Have a Jquery Script on Your Blog To do this Step If Not then Add it From the Below Code.Insert the Below Code Before </head> tag. if it is already added then Ignore this step.



<script src='http://letsenjoy.googlecode.com/files/jquery.js' type='text/javascript'></script>
Now Copy And Paste the Below Code Before </body> Tag.

<br />
<!--Start post title http://goodinblogging.blogspot.com --><br />
<a href='http://goodinblogging.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDElo7vs-P2TDAyM4sPYsCXe2o1kMJBWDfy6L2_YbapdkLCNS9sESX5_hjnl69QddfAeLaByEOppHDB-t52tt_0j-KPa8ekTvXF-arnbH5uAW2eAreHMb9YDPEVymMu4-SrnMUh77cDq0/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://goodinblogging.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDElo7vs-P2TDAyM4sPYsCXe2o1kMJBWDfy6L2_YbapdkLCNS9sESX5_hjnl69QddfAeLaByEOppHDB-t52tt_0j-KPa8ekTvXF-arnbH5uAW2eAreHMb9YDPEVymMu4-SrnMUh77cDq0/s1600/1x1juice.png'/></a><!--End post title http://goodinblogging.blogspot.com -->
Now After Adding the Above Code,Add the Following Css Code Using Template Designer. Or Else Add this Above ]]></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;}
#blog-pager{height:100% !important;}

That's it Now Go through Your Posts and See the Older and Newer Posts Replaced with the Post Titles.
Note: i Can't Guarantee that this Works on All templates. Hope It will Work.

0 comments:

Blogger Template by Clairvo