How To Add Automatic Read More With Thumbnail For Blogger

Hi friends. are you like to show summary of post on front page of  blogger. is it too complicated ?? ok then go for this step.. this step really works!... Read More Function helps us to reduce the loading time of our blog.Look at my home page you can find a difference in the posts showing here and when you visit on the post item page. its automatically generates thumbnail for the post based on the images inside the posts which is quite cool. ok Friends... I think all you guys will love this blogger hack! read below steps to do this cool blogger hack..we will meet again in next post.Thank you.

How To Add Automatic Read More With Thumbnail For Blogger

1. Login To Your Blogger Dashboard--> Desing--> Edit HTML

2. Scroll Down To Where You See </head> tag .

3. Now Add Below Code Before </head> tag.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
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>

4. Scroll down to where you see <data:post.body/> tag.

5. Copy below code and paste it just after <data:post.body/>.

<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> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi05n482HB_9ZMZjxTb0wEHzOnEn8waMHrhJaAw5mSktqogwyx3yXTQ_PVKTV_vAYDhFUwpVrhWbIVs_o5Myn8P69uUGtvkdmpSgCWSK4jRgS01FjANKljMEi51_zTYooajl_UvmUU8Yak/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Note : Adjust description shown
summary_noimg = 430;
summary_img = 340;

Change The Height And Width of Image Thumbnail
img_thumb_height = 100;
img_thumb_width = 120;


6. Now Click On 'SaveTemplate' You are done...