How to Add Post Thumbnails for Blogger

This tutorial is about how  add post thumbnails for blogger on the front page.It's a important widget because it gives a better professional  look to the blog and it also help reduce the bounce rate of your blog or website.It has many advantages like it  as it shows just summary of your post with thumbnails it reduce load-time of your blog or website.It also give you relief from boring long length summary to a better short summary.Overall it increases your page views.So follow the steps below to give a better refreshing look to your site.

How to Add Post Thumbnails for Blogger on Front Page step by step 

Step 1 First Login into Blogger Dashboard.

Step 2 Go to Template and Click on Edit Template Button as shown in below picture.

Step 3 Click on Expand Widget Template checkbox as shown in below picture.

Step 4 Find </head> and paste below code just before 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>

Step 5 Now find blow code:

<data:post.body/>

Step 6 Now replace below code with this:

<b:if cond=’data:blog.pageType == “item”‘>
<data:post.body/>
<b:else/>
<b:if cond=’data:blog.pageType == “static_page”‘>
<data:post.body/>
<b:else/>
<div expr:id=’”summary” + data:post.id’><data:post.body/></div>
<script type=’text/javascript’> createSummaryAndThumb(“summary<data:post.id/>”);
</script>
<a class=’more’ expr:href=’data:post.url’>Read more …</a>
</b:if>
</b:if><small><a style='align:center;' href='http://masterbloggingtips.blogspot.com/' target='_blank'></a></small>

Step 7 Click on Save Template button.

Now you'r done.If you have any problem or question feel free to write it on the comment box or email me at larrimoreashley@gmail.com.

By Ashley Larrimore