Am actually very excited to write this post, probably maybe because I was fulfilled today. However, this is just by the way. I actually noticed a blog when I was researching for a material, that it wasn’t having automatic read more, I now thought within me that how on earth will a blog won’t have a read more.

 And just the main thing that struck me to bring up this article was that the guy’s blog was so disjointed and very long in length, so you have to scroll down down to get some information. Probably you are in that kind of a situation, thank your star because you are in the right place.

 Today, I will be sharing and explaining how to summarize content and show only summary of your post with a read more thumbnail in your home page and other pages like Archive page and label page by using an automatic Read More simple script in your template. One of the advantages of using this automatic read more is that it will make your blog load very faster by showing just fewer post instead of showing the whole lot of the posts , and also when we talk about professionalism… you understand now, it’s added.

 

Note: before you make any changes on your templates, always make a backup of it.
 1. Login in to your blogger account
 2. Then navigate to Template section of your blog and
 3. Then move to Edit HTML and use your mouse to mark expand widget template box.
4. Then search for this tag: </head>, Use Ctrl F on your keyboard to search for it.
5. Now place the code below above </head> the tag in your templates

 

<script type='text/javascript'>
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 120;
img_thumb_width = 120; 
</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>

Note in above codes you can change the numeric numbers according to how you wish it appears on your blog.
summary_noimg = 430; this code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 430 characters.

 

You can customize it to suit your template
summary_img = 340; If the post contains image, then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template
img_thumb_height = 100; this tag decides the height of the thumbnail to be shown in the post. Vary the number 100 to suit your template.

img_thumb_width = 120; This tag decides the width of the Thumbnail image to be shown.

Now find <data:post.body/> in your template and replace it with the codes below:

 

 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<div class='readmore-wrap'>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More</a></span>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/></b:if>

You can now preview your template after youv’ve follow all these steps, and if the codes are well place.. then save. Your homepage is now good to go as it will now look like this:

Enter your email address:


Delivered by FeedBurner