Automatic Read More Hack For Blogger With Thumbnail

Share

'Read More' expandable post hack is one of the most popular blogger hacks. This Post will explain you to add the automatic read more hack for blogger with thumbnail.



Step 1:

Login to Blogger

Go to Design and Select Edit HTML Tab

Then Click Expand Widget Templates

Step 2:

Now Find [CTRL+F] this code

</head>

And BEFORE/ABOVE that paste this code

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

Step 3:

Now Find[CTRL+f] this in the template

<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/AVvXsEhbgy20YzGZPiErQmNbs4FiD_gStyFWc3xG_ObkhCULHgEBc-0asev7-EgbeCKnKmqNmhSRcn3kG1_Ukiim8QeMs5J1m3gnfoQFGhocdwKdO0yPkn-Ee3gqcHAvXFTWdcsWd-o41A4uZIk/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:

Now Save the template.

You Might Also Like:

• Adding "Read More" to Blogger Posts