Adding Auto ‘Read More’ with Thumbnail in blogger

Here’s a nice widget that you may add to your Blogger site which I found. It’s an update that was created by Lasantha Bandara, and this will automatically create a post summary with thumbnail.
Below are the steps:
1. Go to Blogger Dashboard > Template > Edit HTML.
2. Click Expand Widget Templates.
3. Search for </head> tag.
4. Add this code before </head> tag:

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</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: You may change the values below with your own preference:
summary_noimg : number of characters shown when there's no image.
summary_img : number of characters shown when there's an image.
img_thumb_height : height of post thumbnails.
img_thumb_width : width of post thumbnails.

5. Look for this <data:post.body/>

6. Replace the code above with this:

<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

7. Save template
Note: Always perform a backup first before doing any customizations on your template.

Share it Please

Tweet

Islamicvideoportal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.