How To Add Automatic Read More With Thumbnail For Blogger

If you just want to show summary of post on frontpage of blogger then unfortunately, you don’t have any option by default. You will need a external script to make it working.It’s true that, there have been many hacks released to have Read more option on Blogspot or Blogger blogs. Problem with them is that you cannot select the cut-off point and also, there was no support for thumbnail too initially. Here are some scripts which can solve both issues.its automatically generates thumbnail for the post based on the images inside the posts which is quite cool.

17+ Featured Content Slider for Blogger Using jQuery Tutorial

Instructions To Follow:
STEP #1
Log in to Blogger,go to Design -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

</head>

And immediately Before it, paste this code:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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>

Now find this code:

<data:post.body/>

and replace it with the bellow code

<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> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutsemCd-Q3_HS_LpicDoNlJ9EpF35mlO-hW6R9jPKQ6F667KdDk1yDejCARizmtz9_jSh9AovAU8a7DzE7o2mYvBw6bMuBJFC1bnMFXLJA_HcIZwiAfOKyjLq3_rakWEBXAi6qf8d0UL0/s1600/Read+more.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Now Click Save Template




Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutsemCd-Q3_HS_LpicDoNlJ9EpF35mlO-hW6R9jPKQ6F667KdDk1yDejCARizmtz9_jSh9AovAU8a7DzE7o2mYvBw6bMuBJFC1bnMFXLJA_HcIZwiAfOKyjLq3_rakWEBXAi6qf8d0UL0/s1600/Read+more.png Code with The One You Like Bellow

http://i643.photobucket.com/albums/uu153/nirav07/black-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/black.png

http://i643.photobucket.com/albums/uu153/nirav07/black1.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue-dark.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue.png

http://i643.photobucket.com/albums/uu153/nirav07/blue1.gif

http://i643.photobucket.com/albums/uu153/nirav07/bluish.png

http://i643.photobucket.com/albums/uu153/nirav07/brown.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-bluish.png

http://i643.photobucket.com/albums/uu153/nirav07/dark-grey.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-orange.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-purple.gif

http://i643.photobucket.com/albums/uu153/nirav07/green.png

http://i643.photobucket.com/albums/uu153/nirav07/green1.gif

http://i643.photobucket.com/albums/uu153/nirav07/greenish.png

http://i643.photobucket.com/albums/uu153/nirav07/grey-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/grey.png

http://i643.photobucket.com/albums/uu153/nirav07/grey1.gif

http://i643.photobucket.com/albums/uu153/nirav07/light-blue.png

http://i643.photobucket.com/albums/uu153/nirav07/light-orange.gif

http://i643.photobucket.com/albums/uu153/nirav07/orange.png

http://i643.photobucket.com/albums/uu153/nirav07/original.gif

http://i643.photobucket.com/albums/uu153/nirav07/pink.png

http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/purple.png

http://i643.photobucket.com/albums/uu153/nirav07/purple1.gif

http://i643.photobucket.com/albums/uu153/nirav07/red-dark.gif

http://i643.photobucket.com/albums/uu153/nirav07/red-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/red.png

http://i643.photobucket.com/albums/uu153/nirav07/red1.gif

Frequently asked questions and solutions

Q.How can i adjust the quantity of description shown ??

A. just find the bellow code and change it to your need

summary_noimg = 430;

summary_img = 340;

Q. How can i Increase or Decrease the height and width of image thumbnail ??

A. Find the bellow code and adjust it with your width and heght .

img_thumb_height = 100;

img_thumb_width = 120;

Note :Before you perform any hack remember to backup your template so that you might restore your previous template in future.For this click download full template in your blogger Edit HTML page.