Replace Older & Newer Post Links With Post Titles - Helper Blogger

Blogger Widgets | Templates | Tutorials


Tuesday, 13 March 2012

Replace Older & Newer Post Links With Post Titles

When you open a Blogger blog post, there are three links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress blog's display the post titles. But not Blogger.In this post change those static texts to dynamic post titles.We will apply this hack using jQuery.Just follow my steps and you will successfully replace your older and newer posts links with post titles.

How to replace older and newer posts links

1. Adding 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 Blogger Dashboard > Design > Edit HTML.
    • Now find for </head> tag.
    • Add below code just above </head> tag.

    <script type="text/javascript" src=""></script>

    2.Adding The Blog Pager Code

    • Now go to Page/Edit Layout.
    • Click on Add a Gadget > HTML/Javascript.
    • Paste below code and save it.

    <!-- Post title blog pager by 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;} 
    <script type="text/javascript">
    var newerLink = $("").attr("href"); 
    $("").load(newerLink+" .post-title:first", function() { 
    var newerLinkTitle = $("").text(); 
    $("").text("<< " + newerLinkTitle); 
    var olderLink = $("").attr("href"); 
    $("").load(olderLink+" .post-title:first", function() { 
    var olderLinkTitle = $("").text(); 
    $("").text(olderLinkTitle + " >>");//rgt 
    <!-- Post title blog pager by END -->

    On post pages it will show the actual titles of the next and previous posts. On index pages (i.e. homepage, label pages and archive pages) it will show the titles of the topmost post of the next and previous index pages. A tooltip with “Newer post” or “Older post” will appear when you hover the post title, making sure readers can tell which is which.


    1. Each and every person is interested in this sphere of marketing. so now a days every body save time and money also that why Ready made Templates is very popular.

    2. it will be very helpful if u show how to replace newer older link with post thumbnail instead of post title. I've seen this in a website..

      1. @Eusuf - can you tell me the address of that website? so that we will get the Idea to work further

    3. This is great, thanks!

    4. This comment has been removed by a blog administrator.

    5. finally added that on my blog ,, i was searching but ,there was too long methods thanks rahul

      H4ck3r Cracks

    6. You should remember that it will load completely 3 pages instead of one every time user opens a page. I've discovered a better solution and described it here: In short, I'm using external service to load data (and it's caching data too, so there's no multiple requests and delays every time somebody opens your posts). Try it, tell me what you think.

    7. How to add the url of an image instead of "→" and "←"? Thanks

    8. Hi! Nice to meet you here. It is very helpful. Visit Our Cinema Blog, Like and Comment my article. Stay tuned!!


    9. This is the fewest code to add and the shortest method to do the trick. Thanks!


    If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM