Change Blogger Default Navigation To Post Title

confusion of navigation

Blogger Navigation by default have 3 buttons newer posts, older posts and home. Today in this tutorial we are going to demonstrate how to arrange blogger navigation after manipulating little bit of Jquery, CSS and Font Awesome, we will explore two different methods for making the navigation more attractive. The trick we are going to show here is not new it first shared by MS-Potilas in 2013 but as i have done research for this hack and finally i come to know that not more hundreds bloggers using the hack or you might say only hundreds of bloggers love this hack.

We called this hack “change older newer links with post title” it will change your default blogger navigation into your post title which is by default “Newer-posts, Older-posts and Home”. and in our second method we will explore how to show image from post as well as snippet of summary.

To apply  this hack you have to edit your blog template source code so ensure that you have make backup copy of your template in case of any error.

So let’s start .

Live Preview

Add Fontawesome into blogger

  1. Goto template>> edit html and search for the following code.
  2. <head>
  3. In the <head> of your template, just after opening head tag add the following piece of code (Stylesheet Link).
  4. <link rel="stylesheet" href="" />

Note:- If you already have applied fontawesome in your template then skip the above step and proceed to step below.

Installation Of The Javascript And CSS

The hack require Jquery to work so if you alread have loaded jquery in your template then just remove the jquery link from the code below if not then proceed the code as it is.
  1. Goto template>> edit html and search for the following code.
  2. </head>
  3. paste the following code just before the head tag (the code you have search in the step above)
  4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .oldernewerpost {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0px 0px;
        text-align: center;
        width: 300px;
        background: #495061;
        overflow: hidden;
        -webkit-transition-property: background color;
        -webkit-transition-duration: .4s;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-property: background color;
        -moz-transition-duration: .4s;
        -moz-transition-timing-function: ease-out;
        -o-transition-property: background color;
        -o-transition-duration: .4s;
        -o-transition-timing-function: ease-out;
        transition-property: background color;
        transition-duration: .4s;
        transition-timing-function: ease-out;
    .oldernewerright:before {
        font-family: FontAwesome;
        color: #fff;
        content: &quot;
        float: left;
        vertical-align: middle;
        font-weight: bold;
        font-style: normal;
        text-decoration: inherit;
    .oldernewerleft:before {
        font-family: FontAwesome;
        color: #fff;
        content: &quot;
    float: right;
        vertical-align: middle;
        font-weight: bold;
        font-style: normal;
        text-decoration: inherit;
    .oldernewerleft {
        float: right;
    .oldernewerright {
        float: left;
    .home-link {
        margin-top: 5px;
        display: none;
    .oldernewerpost:hover {
        background-color: #3D4351;
    .oldernewerpost a {
        color: #fff;
    .oldernewerpost a:hover {
        text-decoration: none;
    .oldernewerpost img {
      /* thumbnail properties */
        margin-top: 2px;
        padding: 2px;
        width: 72px;
    .oldernewerpost .title {
        line-height: 1.1;
        font-size: 15px;
        font-weight: bold;
        padding: 0 5px 5px;
    .oldernewerpost .summary {
        border-top: 1px dashed #777777;
        border-bottom: 1px dashed #777777;
        color: #404040;
        font-size: 10px;
        line-height: 1;
        padding: 5px;
        text-align: left;
    <script type='text/javascript'>
    // Post titles, thumbnails and summaries to Older Post and Newer Post links (without stats skew)
    // by MS-potilas 2013. See
    // Configuration:
    var maxSummaryLength = 160;
    // In these you can use [title], [summary]:
    var newerLink = '<div class="oldernewerpost oldernewerleft" title="Next - [title]" onclick="location.href=\'[url]\';"><p style="font-size: 20px; color: #f1f1f1;">Next</p><br/><a href="[url]"><div class="title">[title]</div></a></div>';
    var olderLink = '<div class="oldernewerpost oldernewerright" title="Previous - [title]" onclick="location.href=\'[url]\';"><p style="font-size: 20px; color: #f1f1f1;">Previous</p><br/><a href="[url]"><div class="title">[title]</div></a></div>';
    // configuration ends
    function setLink(selector, template, defthumb, entry) {
      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
      var url = $(selector).attr("href");
      var summary = $("<p>"+entry.content.$t+"</p>").text();
      if(summary.length > maxSummaryLength) {
        summary = summary.substring(0, maxSummaryLength);
        var indexBreak = summary.lastIndexOf(" ");
        summary = summary.substring(0, indexBreak)+"...";
      var htm = template.replace(/\[title\]/g, entry.title.$t);
      htm = htm.replace(/\[url\]/g, url);
    function setOlderLink(entry) { setLink("", olderLink, defaultOlderImage, entry); }
    function setNewerLink(entry) { setLink("", newerLink, defaultNewerImage, 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/default?alt=json-in-script&start-index="+(postindex-1)+"&max-results=3&callback=?", function(resp) {
                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]);
              $.getJSON("/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=?", function(resp) { setOlderLink(resp.feed.entry[0]); });
      }, 250);

That’s it.

You can customize the look and feel of the buttons by playing with CSS code we have shared above, In case of any error during installation (in the code above) of the script or having trouble while editing, please don't hesitate to let us know, we will do the job free (it will just cost you one smile for us). Hope you like this, Peace and blessing bodies.. ! :)

No comments Post Yours! Blog Comment Policy ▼
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment. To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.

PLEASE NOTE: We have Zero Tolerance to Spam. We reserve the rights to remove any comment from the Blog. Please leave comments that are respectful and useful. Comments with spamy links and solely promotional in nature will be deleted immediately upon our review.

Post a comment