How To Include Auto Read More In Blogger?



Including read more feature below posts gives professional look to your blog. As you can easily include read more in blogger by inserting jump break, but you would have to manually add it every time whenever you publish any post. So better is to make settings for auto read more option as it saves your time and also prevents from being confused about where to insert it at proper position in body content. Follow these simple steps:
  • Login to Blogger.
  • Go to Design> Edit HTML.
  • Backup your template.
  • Check the Expand Widget Templates.
  • Look for </head> by pressing Ctrl+F
  • Add the following code after </head>
<!--http://www.basicsofhacking.com/-->
<script type='text/javascript'>
var thumbnail_mode =&quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
    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>
<!--http://www.basicsofhacking.com/-->
  • After that, find this code: <data:post.body/>
  • Replace that code with following code:
<!--http://www.basicsofhacking.com/-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more » </a>
</b:if>
</b:if>
<!--http://www.basicsofhacking.com/-->
  • Click preview & then save it.

Sharing is Caring

Related Posts

Previous
Next Post »

2 comments

comments
September 2, 2011 at 4:19 PM delete

You know any site name which is provide to send fake message any mobile number.Reply my emailid -
anupshukla1988@gmail.com

Reply
avatar
September 2, 2011 at 10:40 PM delete

check it: http://www.basicsofhacking.com/2011/05/send-anonymous-sms-from-bollywoodmotion.html

Reply
avatar

Thank you for your comment.