Using Post Title Instead Of Old And New Post

You might have see older post and newer post link at the below part of each blog post. They are the links to the post publish a step earlier and later. Actually most of the people don't pay much attention to it as they don't attract much visitors.
But by replacing the old post and new post text with their post titles, remaining the link same, we can attract much more visitors, as we've seen in Harry Potter where we're busy seeing the exploration of wonders of wizarding world!  

This trick surely looks cool, isn't it. After all it's meant to be cool, hehe, just kidding. Now we shall move forward to accomplish this trick. Follow below;

1. Adding Jquery Code;

Before you implement this trick you will need to add a Jquery code. If you have already added this Jquery code while doing other blogger tricks then you don't need to add it again. Just skip it and go for next step. See below for how to add Jquery code;

• Go to dashboard>Template>Edit Html.
• Then in your template search for </head> tag and insert the below code just above </head>;

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

• Now, save your template and go for next step.

2. Adding The JavaScript Code;

This trick is only possible because of Javascript. We will need to add it. Follow below;

• Go to you template code;dashboard>Template>Edit Html.
• Then find for </body> tag and paste the below code  just above </body>.

<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>

• Now click on template and you are done.

3. Styling The Posts Links;

Sometimes it happens that your post name may be a bit more longer than usual, or you may like to change it's colour to suit your taste. If this is the case then;

• Add the below CSS code to your blog;

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

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

• You can directly edit the CSS above. Adjust according to your need and save it.

I hope you guys have succeed in this.

Read Our Other Useful Posts;

• Remove Footer Credit Links From Any Blogger Template
• Change Blogger Posts Permalink
• Submit Your Blog Feed To Google News

Author : Anonymous

Share this

Related Posts