How to Add Post Thumbnails for Blogger

Posted by Albin Thomas

Today's I am providing tutorial to how to add post thumbnails for blogger on front page. Post thumbnail should to need every blogger because it gives you more professional look to the blog. It has many advantages like it reduce load time of your website because its show summary of your post with thumbnail and reduce long length post into a short summary, It also increase page views of your blog. It also helps to reduce bounce rate of your blog or website.

Add Post Thumbnails for Blogger

How to Add Post Thumbnails for Blogger on Front Page

If you need to add post thumbnail for blogger then please follow below steps:

Step 1

Log in into Blogger Dashboard.

Step 2

Go to Template and Click on Edit Template Button as shown in below picture.
How to Add Post Thumbnails for Blogger

Step 3

Click on Expand Widget Template checkbox as shown in below picture.
How to Add Post Thumbnails for Blogger

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 type=’text/javascript’>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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;

Step 5

Now find blow code:

Step 6

Now replace below code with this:
<b:if cond=’data:blog.pageType == “item”‘>
<b:if cond=’data:blog.pageType == “static_page”‘>
<div expr:id=’”summary” + data:post.id’><data:post.body/></div>
<script type=’text/javascript’> createSummaryAndThumb(“summary<data:post.id/>”);
<a class=’more’ expr:href=’data:post.url’>Read more …</a>
<a href="http://www.expertalby.com/2014/07/how-to-add-post-thumbnails-for-blogger.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.epertalby.com" rel="dofollow" target="_blank" title="blogger widgets"><img src="https://bitly.com/haakblog" alt="blogger widgets" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></b:if>

Step 7

Click on Save Template button.
If you have any question or update than you can contact with us any time at our E-mail suppor


Feel free to drop your feedbacks;
Its our pleasure to hear it from you...

Recommended for you>>>

Don't Forget To Join Our Community