The latest version Readmore automatic with Thumbnails

Discuss Readmore automatic with Thumbnails, certainly not foreign to the ear of the blogger community. Many types of tutorials about how to add widgets Readmore automatic with Thumbnails, which can be encountered on the internet.
To Readmore automatic with Thumbnails, which is currently circulating, I think there is a shortage.

If we write an article without a picture, then on display in the homepage does not have an image that appears. Here, I will discuss about how to make Readmore automatic with Thumbnails, even write an article without pictures, but pictures still appear on the homepage of our blog.

Step by step how to create Readmore automatic with Thumbnails:

1. Login to blogger
2. Click Layout
3. Click Edit HTML
4. Download / backup your template first
5. Click on Expand Widget Templates.
6. Copy and paste the code below and place the code before the </ head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 330; summary_img = 290; img_thumb_height = 160; img_thumb_width = 140; </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");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px !important;"><img src="http://1.bp.blogspot.com/_Tj_19swNuzI/So4Uh3CFaYI/AAAAAAAAA1c/sQSXDf-I9MM /s320/logo-nyar-bcom.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
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>

7. Search <data:post.body/> code in your template, use Ctrl + F and enter the code <data:post.body/> then enter.

8. After the meet to change the code with the following code:

<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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

9. Save your template.

With this tutorial, I hope to add insight to the blogger

Description:

Yellow printed code, is a modification that I've added in the previous version of the "Readmore automatic with Thumbnails"
Please change this URL :

http://1.bp.blogspot.com/_Tj_19swNuzI/So4Uh3CFaYI/AAAAAAAAA1c/sQSXDf-I9MM /s320/logo-nyar-bcom.png

with your image