Automatic Read More with Thumbnail for Blogger including 30 Buttons

After the great success of expandable posts trick, here comes another trick to minimize your blogger posts so that only some of your description and image appears on the homepage and the rest of all is shown when you visit that post. The main benefit of this automatic read more with thumbnail trick is that its automatically minimize your post. You don't have to insert any extra code while you are publishing.

Login To Blogger

Go To Layout ---> Edit Html
Click On Expand Widget
Now find the code

</head>

and paste the below code above it

<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>

Now Find The code

<data:post.body/>

and replace it by the below code

<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='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Click Save Template .. You are Done

Change http://i37.tinypic.com/351icqx.jpg Code with The One You Like Bellow

 Copy Image Url

Frequently asked questions and solutions

Q.How can i adjust the quantity of description shown ??
A. just find the bellow code and change it to your need

summary_noimg = 430;

summary_img = 340;

Q. How can i Increase or Decrease the height and width of image thumbnail ??
A. Find the bellow code and adjust it with your width and heght .

img_thumb_height = 100;

img_thumb_width = 120;