Replace Older Post & Newer Post Links/Images With Post Title on Blogger.

Table of Contents

If you are blogger user than you might have seen few blogger blog that showing older page and newer post title instead of “Older Post” and “Newer post” text or image ( like my blog ) . i had shared article how you can change text with images? and now again i am coming with new feature. It is one of the WordPress based feature, that they show complete title of a link instead of text like blogger provides. I personally feel that this feature will give you more clicks with complainer to Older , Newer, home images or links. People will going to click on link only when they find something related to there need, It is only possible if we change link with title of the post,and hence to satisfy those need of visitors one must have to adopt this feature for there blogger blog.
title of older post newer post

Replace Older Post & Newer Post Links/Images With Post Title on Blogger.

Step 1: Login in to your blogger account.
Step 2: Go To Blogger Dashboard > Template > Edit HTML  navigation and find following code (By pressing Ctrl+F)
]]></b:skin>
Step 3: Paste Following CSS style 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;
}
  
Step 4: Find following code (By pressing Ctrl+F)
</head>

Step 5: Just Above </ head> tag copy and paste following JavaScript.

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

Step 6: Find following code (By pressing Ctrl+F)

</body>

Step 7: just above </body> tag copy and paste following code.

<!–Start post title code https://www.heerentanna.com –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script type=’text/javascript’>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
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><a href=”https://www.heerentanna.com/”>Gadgets By Tips Via Blogging</a><!–End post title code https://www.heerentanna.com –>

Step 8: Save Your blogger template and see your blog 🙂

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Heeren Tanna

Heeren Tanna

Heeren Tanna, a Digital Marketing Consultant, Trainer and Speaker on a mission to help 10,000 people in starting a business online and making a full time income form it.

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.