How to Apply Read More Option to All Posts Automatically in Blogger

Thursday 11 April 2013

How to Apply Read More Option to All Posts Automatically in Blogger

You have noticed that almost every blog has Read More button on the posts which are displaying on home page. These posts have excerpt function to make the posts short on the home page for wider coverage of posts.

In blogger, there is no excerpt function for posts by default. That's why, a simple blogger template always displays full post. Because of full length post on home page, the length of the page has been increased or the home page covers only 2 or 3 posts maximum. Some custom blogger templates has the excerpt function for the posts.

If you will apply this function then home page can cover more posts with equal size and space. Another benefit of this function is that it causes to increase the charm and beauty of your blog layout.

If you are using a template which does not have the read more function, then you can easily apply this function for your current template. Simply follow the steps:

1- Go to blogger dashboard and choose "Template" and then click on "Edit HTML"
2- Press "Ctrl+F" and use Template Editor search area for searching </head> and press Enter
(Note: Click on the template code area and then press "Ctrl+F")

Now Just above the </head> tag, paste the following code.

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

//]]>
</script>

Now Search for <data:post.body/> and replace it with the following code:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

Now "Save template" and check the work.

Important Notes:

You can change the thumbnail size and number of character before Read More option of your choice.

summary_noimg = Increase the characters if your post have no image.
summary_img = These characters are apply on posts with images
img_thumb_height = This will apply for the height of your post thumbnail on home page
img_thumb_width = This option will work for the width of your post's image on home page.