How to Replace - Next/Previous link/buttons with post titles?

We usually see Next/Previous links or buttons being replaced by Next/Previous post title on most of the Wordpress websites. We can have the same kind of display even on Blogger by adding a small script to the blogger HTML code. These links/buttons are very much essential for blogger posts navigation for the visitors. So most of the visitors will use these links/button to navigate between different pages of the blog posts. This navigation is called as blog-pager that assists the visitor for navigation between the posts or pages on the blog.

The coolest way to increase the visitor's interest in blog posts is to replace such Next/Previous links or buttons with Next/Previous Post titles.

Let us see the process of adding this cool feature to the blog.

1. Go to: Dashboard -> Layout -> Add a Gadget -> HTML/JavaScript

2. Paste the below code in widget Content


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" h3:first", function() { var olderLinkTitle = $("a.blog-pager-older-link:first").text(); $("a.blog-pager-older-link").text(olderLinkTitle); }); var newerLink = $("a.blog-pager-newer-link").attr("href"); $("a.blog-pager-newer-link").load(newerLink+" h3:first", function() { var newerLinkTitle = $("a.blog-pager-newer-link:first").text(); $("a.blog-pager-newer-link").text(newerLinkTitle); }); </script>

NOTE: The highlighted code is to acquire JQuery framework. If we already have this added to template we don't need to have this code within this widget code.


3. Save the widget.

4. Place the widget below the "Blog Posts" area as shown below.



5. Save Arrangements and View blog to see the changes.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.