Monday, March 31, 2014

Change Older & Newer Post Links With Post Titles

at 7:26 AM
1 Comments

After long time i decide to create a blog post and hope that it will be able to continue. In this tutorial we will learn how to change older newer post link with post title. The newer post, older post link available on the bottom of every blog. Already WordPress blog show the same thing but blogger not able to display this. So we added into blogger manually. Now we just follow few steps for added your older and newer posts links with post titles.
Replace Older & Newer Post Links With Post Titles

How to replace older and newer posts links?


1. Adding jQuery.

First we will use jQuery. For jQuery codes to work, first you have to load jQuery JavaScript library.

(Note - Skip this step if you have already added jQuery to your blog)

Go to Design > Edit HTML and paste this  code before </head> line in your template:


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

2. Adding the blog pager code

Go to Design > Page Elements > Add A Gadget and paste this code into a HTML/Javascript gadget.

<!-- Post title blog pager by bloggerknown.com START -->
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;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 by bloggerknown.com END -->

Now on post pages it will show the post titles of the next and previous posts. Enjoy!
Get Free Updates:

1 comments:

  1. Hmm this is quite easy method
    www.itshughal.com

    ReplyDelete

Your feedback is always appreciated. we'll try to reply to your queries as shortly as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please don't spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad Azeem