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>