Replace Older Post & Newer Post Links/Images With Post Title On Blogger

If you are blogger user than you might have seen few blogger blog that showing older page and newer post title instead of "Older Post" and "Newer post" text or image ( like my blog ) . i had shared article how you can change text with images? and now again i am coming with new feature. It is one of the Wordpress based feature, that they show complete title of a link instead of text like blogger provides. I personally feel that this feature will give you more clicks with complainer to Older , Newer, home images or links. People will going to click on link only when they find something related to there need, It is only possible if we change link with title of the post,and hence to satisfy those need of visitors one must have to adopt this feature for there blogger blog.

Replace Older Post & Newer Post Links/Images With Post Title On Blogger.

Step 1: Login in to your blogger account.

Step 2: Go To Blogger Dashboard > Template > Edit HTML  navigation and find following code (By pressing Ctrl+F)

]]></b:skin>

Step 3: Paste Following CSS style Above ]]></b:skin>

.blog-pager-newer-link {

background-color:transparent !important;

padding: 0 !important;

} 

.blog-pager-older-link {

background-color:transparent !important;

padding: 0 !important;

}

#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;
}

  
Step 4: Find following code (By pressing Ctrl+F)

</head>

Step 5: Just Above </ head> tag copy and paste following JavaScript.

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

Step 6: Find following code (By pressing Ctrl+F)

</body>

Step 7: just above </body> tag copy and paste following code.

<!--Start post title code http://www.tipsviablogging.com -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    // Post titles to Older Post and Newer Post links (without stats skew)
    // by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
    //<![CDATA[
    var urlToNavTitle = {};
    function getTitlesForNav(json) {
      for(var i=0 ; i < json.feed.entry.length ; i++) {
        var entry = json.feed.entry[i];
        var href = "";
        for (var k=0; k<entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            href = entry.link[k].href;
            break;
          }
        }
        if(href!="") urlToNavTitle[href]=entry.title.$t;
      }
    }
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
    function urlToPseudoTitle(href) {
      var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
      if(title) {
        title=title[1].replace(/-/g," ");
        title=title[0].toUpperCase() + title.slice(1);
        if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
      }
      return title;
    }
    $(window).load(function() {
     window.setTimeout(function() {
      var href = $("a.blog-pager-newer-link").attr("href");
      if(href) {
        href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
        var title=urlToNavTitle[href];
        if(!title) title=urlToPseudoTitle(href);
        if(title) $("a.blog-pager-newer-link").html(title);
      }
      href = $("a.blog-pager-older-link").attr("href");
      if(href) {
        href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
        var title=urlToNavTitle[href];
        if(!title) title=urlToPseudoTitle(href);
        if(title) $("a.blog-pager-older-link").html(title);
      }
     }, 500);
    });
    //]]>
    </script>
    </b:if><a href="http://www.tipsviablogging.com/">Gadgets By Tips Via Blogging</a><!--End post title code http://www.tipsviablogging.com -->

Step 8: Save Your blogger template and see your blog :)