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.
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>
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>
<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
Frequently asked questions and solutions
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.
HOW CAN I ADJUST SPACING BETWEEN 2 POSTS?
ReplyDeletedear, I used this one and it works well for my blog. however, i cannot read the rest of my secondary page while trying to click on the Read more button. Please help me
ReplyDeletePlease, Help me. Can you tell me how to put read more icon only on my homepage? when i use this script, and paste it into my blog, I can not open my second page or third page when pushing the icon Read more.\
ReplyDeleteThanks
Sorry, i have some problems.
ReplyDeleteWhen i put these codes into my blogspot, yes of course.It works, but when i click on my other pages, standalone pages ( not post page but page ), it shows, readmore button but when i click on it, the contents inside cannot be shown. Can you tell me why?
THis is my blog....try click on "Majalah" or "Tukar Link",
ReplyDeleteHttp://gigitancinta.blogspot.com
and click "Readmore button"
good, i love it..
ReplyDeleteHow can i remove it from static pages as it cause problem that it showing again and again
ReplyDeletethank you..i like it damn much!!! (^_^)
ReplyDeleteI like it... but it doesnot work on my pages in blogger.
ReplyDeleteWhat am i supposed to do. ??? Plz help.
orang Palu bilang, Bagus
ReplyDeleteThanks budy its preety cool........
ReplyDeleteMay I know how to change the font style?
ReplyDeletethis gives very description of my post,
ReplyDeletei want to give discription atleast 10lines in discription..
please help
email me @ rjcriminal@gmail.com
Thank you : help
i made a blog page and it was spoiled
ReplyDeleteyou can see it at
http://freemindtrickz.blogspot.com/p/subdomain.html
visit and tell how to correct...
rjcriminal@gmail.com
Thank You Very Much Bro! I Used Your Technique And Its Working!!
ReplyDeleteThis Is My Link..Http://Infoaday.Blogspot.Com/
The Ctrl+F That You Suggest Was Most Helpful..
I Just Having Difficulties With
"Now find this code: and replace it with the bellow code"
It Should Be:
"Now find this code: and replace ALL OF IT IN THE TEMPLATE with the bellow code"
By The Way, Thanks Again!