Add Post title to Older or Newer Post like In WordPress

WordPress, the most recommended CMS platform recommended by most of the people. It serves as a great CMS platform which offers large professional looking blog themes and various different types of multitasking plugins, that provide a smooth way to your blogging. SEO tools offered by WordPress are  superb that provide easiness to apply SEO techniques and save lot of time.

We are constantly looking for some useful WordPress plugins and changes their compatibility so that Blogger users can also enjoy the features that's why we recently launched.

• Email newsletter signup box in WordPress style for Blogger blog. 

Today we are sharing a JavaScript code that enables your blog to show the title of next and previous post in place of Older post and Newer post at bottom part of your blog.

This tricks provide a easiness to readers during surfing because before going to the next post they will already know what type of post is next?

Sound interesting! If feel this tricks is great, follow the following steps and and make your current page navigation to more customizable just like in WordPress.

Demo

How To Add Post Tile In Older and Newer Post

First of all take backup of your blog template before making any change in it and save it in your local computer then proceed further.

Go to Blogger /  Template /  Edit HTML and search for </head> section in template, then paste following jQuery library code just above </head>. You can skip this option if your blog template already have jQuery library plugin installed.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Now find </body> and paste following code just above it.

<!-- Start code on http://www.allbloggingtricks.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    //
    // Configuration:
    var olderLink = 'Older Post &gt;&gt;<div class="blog-pager-older-link-title">[title]</div>';
    var newerLink = '&lt;&lt; Newer Post<div class="blog-pager-newer-link-title">[title]</div>';
    var olderTitle = 'Older Post - posted on [date]';
    var newerTitle = 'Newer Post - posted on [date]';
    //
    function setLink(selector, link, title, entry) {
      var htm = link.replace("[title]", entry.title.$t);
      $(selector).html(htm);
      var date = entry.published.$t.match(/\d+/g);
      date = new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]); // convert iso
      title = title.replace('[date]', date.toLocaleDateString());
      title = title.replace('[datetime]', date.toLocaleString());
      title = title.replace("[title]", entry.title.$t);
      $(selector).attr("title", title);
    }
    function setOlderLink(entry) { setLink("a.blog-pager-older-link", olderLink, olderTitle, entry); }
    function setNewerLink(entry) { setLink("a.blog-pager-newer-link", newerLink, newerTitle, entry); }
    $(window).load(function() {
      window.setTimeout(function() {
        var timestamp = $(".published").attr("title");
        if(timestamp && timestamp != "")
          $.getJSON("/feeds/posts/default?alt=json-in-script&published-min="+encodeURIComponent(timestamp)+"&max-results=0&callback=?", function(resp) {
            var postindex = parseInt(resp.feed.openSearch$totalResults.$t);
            if(postindex > 1)
              $.getJSON("/feeds/posts/summary?alt=json-in-script&start-index="+(postindex-1)+"&max-results=3&callback=?", function(resp) {
                setNewerLink(resp.feed.entry[0]);
                var postcount = parseInt(resp.feed.openSearch$totalResults.$t);
                var startindex = parseInt(resp.feed.openSearch$startIndex.$t);
                if(postcount - startindex > 1) setOlderLink(resp.feed.entry[2]);
              });
            else
              $.getJSON("/feeds/posts/summary?alt=json-in-script&start-index=2&max-results=1&callback=?", function(resp) { setOlderLink(resp.feed.entry[0]); });
          });
      }, 500);
    });
    //]]>
    </script>
    </b:if>
<!-- End code on http://www.allbloggingtricks.com -->

Congrats you have successfully placed the JavaScript code now its turn to add some CSS rule to improve its appearance.

Find ]]></b:skin> in template and paste following CSS code just above it.

.blog-pager-newer-link 
      {background-color:transparent  ;
       padding: 0  }

.blog-pager-older-link 
      {background-color:transparent ;
        padding: 0  ;}

#blog-pager-newer-link 
       {padding:5px;
        font-size:90%;
        width:200px;
        text-align:left;}

#blog-pager-older-link 
        {padding:5px;
         font-size:90%;
         width:200px;
         text-align:right;}

Finally save your blog template and if all steps performed correctly then see the changes that you made up.

Credit

Do you want to know who is the man behind this wonderful widget? Ofcourse not! this JavaScript code is given by MS-potilas, the author and admin of Yet Another Blogger Tips Blog.

If you have any problem about its placement or any other topic then feel free to ask in comments.

Follow @twitterapi

If you enjoyed this article then kindly take 5 seconds to share it!!