Change Older & Newer Post Text With Post Title In Blogger

In Blogger, you have seen that there is OLDER & NEWER posts text at the end of each blog post. It looks fine but if it is replaces by the blog post titles then it looks good and also helps the visitors and followers of your blog to know about the other posts easily. So to change the OLDER & NEWER posts text to the blog post titles you have to apply the following code:

1. Login To Your Blogger Dashboard. 
2. Go To Template. 
3. Backup Your Template. 
4. Click On Edit HTML. 
5. Search for the following line by pressing Ctrl+F:

]]></b:skin>

6.  Paste Following Code Just Above: ]]></b:skin>

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

7. Search for the following tag by pressing Ctrl+F:

</head>

8.  Paste The Following Code Just Above </head> tag:

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

9. Search for the following tag by pressing Ctrl+F:

</body>

10. Paste The Following Code Just Above </body> tag:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var urlToNavTitle = {};
function getTitlesForNav(json)
{
for(var i=0 ; i < json.feed.entry.length ; i++)
{
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++)
{
if (entry.link[k].rel == 'alternate')
{
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.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(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title)
{
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href)
{
href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html(title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href)
{
href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html(title);
}
}, 500);
});
</script>
</b:if>

11. Save Your template & you are all done.

Refresh your blog to see the changes.

- If you like my post, please take seconds to share.