How to add Automatic Read More with Thumbnail in Blogger BLOG

This article will explain you to how to add the automatic read more for blogger blog with thumbnail.

Collected Picture from www.earningtips24.com

Step 1: Go to Blogger.com Login with your Email and password, Go to Design and Select Edit HTML Tab and click and then find
Expand Widget Templates and then Click the check box again
Step 2: Press CTRL+F this code

</head>

Add these code before </head>

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
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>

And then next step will be Again press CTRL+F and find

<data:post.body/>

And Replace with below code

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

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

<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> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBQy2oo9CH4zIMiyAYIawiDQpXxRVKQu8m7I6BMzDS3WRGig1CfKRwWhF4mp8MbLbUtEfqR2v2Z7-3ofyly95CEywx_w4OHB0Zwnjif-Oxow9L8HhhAG0c8mCxVev3OxXulRFh2z70b4/s400/read_more.jpg'/></a></span>

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

Step 4: Save the template by clicking save button

Monday, 20 December 2010 by Lover boy · 0