How to Add Post Titles to Newer and Older Post Links 2

Previously We Have Already Posted on this Topic. But here We Are Updating Some Changes.So 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.

Also Read :How to Add Post Titles to Newer and Older Post Links

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.



How to Add Post Titles to Newer and Older Post Links (2):.


First Login to Blogger < Design < Edit Html.


Now Search for </body> tag and Paste the Below Code Directly Above/Before </body>.

<!--Start post title code http://goodinblogging.blogspot.in -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.blog-pager {
background: transparent none no-repeat scroll top center;
padding: 10px 4px 0 !important;
}
#blog-pager {
height: 60px;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background: -moz-linear-gradient(center top , #E4F5FC 0%, #BFE8F9 38%, #9FD8EF 66%) repeat scroll 0 0 transparent;
background-color: #cde0f5;
width:300px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(38%,#bfe8f9), color-stop(66%,#9fd8ef));
background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 38%,#9fd8ef 66%);
background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 38%,#9fd8ef 66%);
background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 38%,#9fd8ef 66%);
background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 38%,#9fd8ef 66%);
border: 1px solid #57C2ED;
border-radius: 3px 3px 3px 3px;
color: #000000 !important;
padding: 5px 17px;
}
.blog-pager-older-link:hover, .home-link:hover, .blog-pager-newer-link:hover {
border: 1px solid #cde0f5;
box-shadow: 0 0 4px;
text-decoration: none;
}
</style>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links Stylize (without stats skew)
// by Blogging Geek AAPK....
/*<![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>61){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("<span>«</span> "+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(b+"<span>»</span>")}}},500)});/*]]>*/</script>
</b:if>
<!--End post title code http://goodinblogging.blogspot.in -->

Now If you Wish You Can Change the Above Highlighted Codes According to Your Template.

Now Save the template and Go to Your Posts and See The Trick is Applied to Your Blog.