Replace Older and Newer Links with Older Post Title and Next Post Title

The majority of the Blogger Templates or Wordpress Template generally observes ‘Next – Previous’ links button for switching posts vise-versa with simple links. In few templates webmasters use images and CSS3 code buttons to attract their visitors.
But how far this buttons makes visitor satisfy if they don’t know which post is hiding on next post button. To browse more posts or to increase more page views by displaying next post title links below each posts instead of showing older or new links. In our earlier post discussed about how to show images or replace images with older or newer links.
Now in this tutorial educate you how to replace older and newer links with Post Titles.
But to implement this experiment on your template you’ve to add a Jquery code. Webmasters don’t need to work hard for adding this code to template, by our step by step method can easily alter without any affecting template settings.

What are the advantages for adding this Jquery code to template?

• Replace old version Older and Newer links with Previous Post Title and Next Post Title
• Website/blog Page views indirectly increases
• Visitors can easily finds next and previous posts titles instantly
• Code is based on Jquery easily compatible on templates
• Possibility of increase in visitor’s quantity
• Generation of Blog/Website Revenue may be improved

How to Add Jquery Replacing Older links and Newer links with Post Titles?

Sign into your blogger account
From Blogger Dashboard select ‘Template’ link tab and proceed
Click on ‘Edit HTML’ link tab
Search for tag

</head>

After finding tag copy below code and paste above to it
(Note: Search this below code If you’ve already added this Jquery code, Just skip to next step don’t need to repeat to add again)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Step Two
Now Find tag

</body>

After finding tag copy below script code and paste above to it

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
//]]>
</script>

After successful adding code ‘Save Template’ and preview your experiment
That’s done.
What you do when post title not adjusting equally on template?
In this situations webmaster have to alter width, color etc., according to requirement of template as shown in below
Just find this code on template and adjust it or else paste it above ]]></b:skin>

#blog-pager-newer-link  {
font-size:85%;
width:220px;
background:#fafafa;
}

#blog-pager-older-link {
font-size:85%;
width:220px;
background:#fafafa;
}

Author’s Note:

I hope this tutorial helped you, then Don’t forget to Join our community.
Thanks