Saturday, June 02, 2012

Replace Older and Newer post links with post title in Blogger

Posted On 2 comments Follow us on twitter

add post titles to newer and older posts


In Blogger many hacks are developed, many of them are created with unique ideas and some of them are adopted from Wordpress. Here’s another hack, this hack is adopted from Wordpress, when you see a Wordpress blog in post section (single page) you will see blog pager in the bottom of post, which has links to previous and next post with their titles and Blogger also has blog pager with link to previous and newer post but in Blogger you will see older post and newer post in blog pager instead of their titles, with this hack you can replace older post and newer post with actual post title. With this hack you can increase interest of your blog users because post title are more relevant from older post and newer post links as well as this hack can also reduce your site’s bounce rate (As I think).

Adding post titles to Older and Newer Post links in blogger.

Step 1. Login to your Blogger account.
Step 2. Click on your blog (in which you want to add this hack).
Step 3. Select template from left side.
Step 4. Click edit HTML
Step 5. Ignore template editing warning by clicking "Proceed".
Step 6. Check "Expand Widget Templates" box.

Step 7. After that Find </head> in your Blogger Template (To find anything press ctrl+f) and paste below code above </head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

If you have jQuery preinstalled you don't need to do this.

Step 8. After that you hace to find </body> and paste below code above </body>:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#blog-pager-newer-link{font-size:90%;width:200px;text-align:left;padding:5px}
#blog-pager-older-link{font-size:90%;width:200px;text-align:right;padding:5px}
.blog-pager-newer-link,.blog-pager-older-link{background-color:transparent!important;padding:0!important}
</style>
    <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(e){for(var c=0;c<e.feed.entry.length;c++){for(var a=e.feed.entry[c],d="",b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){d=a.link[b].href;break}""!=d&&(urlToNavTitle[d]=a.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(a){if(a=a.match(/\/([^\/_]+)(_.*)?\.html/))a=a[1].replace(/-/g," "),a=a[0].toUpperCase()+a.slice(1),28<a.length&&(a=a.replace(/ [^ ]+$/,"..."));return a}
$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];b||(b=urlToPseudoTitle(a));b&&$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}if(a=$("a.blog-pager-older-link").attr("href"))(b=urlToNavTitle[a])||(b=urlToPseudoTitle(a)),b&&$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)},500)});
    //]]>
    </script>
    </b:if>

Here is demo of this hack (Replace Older post and Newer post link with post title in Blogger):



Post title in blog pager


Related posts

Add pure Html 5, Css 3 Contact us form to Blogger and Wordpress blogs
Add Breadcrumb Navigation To Blogger Blogs
Add Social media widget with count to Blogger
Show widgets in Blogger mobile templates

Credit:

This hack (Add Post Titles to Older Post Newer Post Links) is created by MS-potilas from Yet Another Blogger Tips Blog

2 comments:

  1. is there any other way that we can do withouth javascript? I tried this script but causing my blog loading become slow. Thanks

    ReplyDelete