As you might have noticed the recent change made to PcTricksBlog.com. Well, I have replaced the newer and older links that used to appear below every post in post page with the title links of next and previous post. You can check out these at any post page in our blog.
Benefits of Older - Newer Post Title Links
You might know that most of the visitors land on your blog at some post page. After landing a visitor at your blog, its your efforts that make them stay longer on your blog. For that reason, I have replaced the older and newer links with the post titles, so that readers can have the idea of next and previous post.
Adding post titles instead of older and newer links will help in increasing your page views and traffic too.
How to Replace newer-older links with Post Titles
Adding the script - This is a jQuery library script code that you need to place in <head> section. You can place it anywhere else too, but placing the script in <head> section will work wonder. If you have already added it in your template, then skip this step.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Adding the Replacing Code - Now you have to add following code to your template just below post section. Follow these steps -
- Login to your blogger dashboard.
- Go to Design view.
- Add a new HTML/JavaScript gadget just below BlogPosts section.
- Place the following code into that HTML section.
- Click Save and you are done.
<!-- Post title older newer links start here -->
<style type="text/css">
#blog-pager-newer-link {font-size:15px;width:250px;text-align:left;}
#blog-pager-older-link {font-size:15px;width:250px;text-align:right;}
</style>
<script type="text/javascript">
$(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>
<!-- Post title blog pager ends here -->
<style type="text/css">
#blog-pager-newer-link {font-size:15px;width:250px;text-align:left;}
#blog-pager-older-link {font-size:15px;width:250px;text-align:right;}
</style>
<script type="text/javascript">
$(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>
<!-- Post title blog pager ends here -->
Just save the arrangements and you are done with updated post titles in place of Newer and Older post Links.
Stay tuned for more updates.The code is shared from fellow bloggers.
0 Response to "Replace Older and Newer Post Links With Post Titles"
Post a Comment