Adding Read More & Thumbnail in Blogger

 

Blogger: clickable thumbnail with auto readmore

If you are using a blogger platform of Google then you would probably facing an issue with your blog post to make the "Read More" and the "Thumbnail" of every post to be display. 

This trick will automatically create the "Read More" and diplay the picture "Thumbnail". 

 Log in to your Blogger account and go to the "Theme" Section. 

 Click on the "Edit HTML".

In the code window look for </head> line to add the "Read More" code below right after the line.

<!-- Auto read more script Start -->

<script type='text/javascript'>

var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail

summary_noimg = 430; //summary length when no image

summary_img = 340; //summary length when with image

img_thumb_height = 200;

img_thumb_width = 200;

</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(thumbnail_mode == "yes") {

 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>

<!-- Auto read more script End -->

While comparing WordPress and Blogger, the one down-point of Blogger is that there is no feature to set or choose any picture that you want as thumbnail of every post.

So, the solution is to make a beautiful thumbnail and always add it as the first thumbnail of the post.

To do this, first we need to find this line <data:post.body/>

Replace the line with this code.

<!-- Auto read more Start -->

<!-- http://www.BloggerSentral.com -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<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>

<a class='more' expr:href='data:post.url'>Read more ...</a>

</b:if>

</b:if>

<!-- Auto read more End -->

BOOM! That's it! Now publish the post and you will notice that the thumbnail is now is visible in the post.

Share: