In this tutorial, I will show you how to make a great Auto Readmore with cropped thumbnail for blogger blogspot. This tutorial also fix the problem for Static Page when applying this auto readmore script.
Just follow the steps below.
First, Login to your blogger account, click Design, click Edit HTML, then click Expand Widget Templates.
Find code below (hit Ctrl+F on your keyboard).
You can set the size or the appearance by customize the set of the red colored text shown above.
After all, find this code:
Now, your blog already looks nice and neat. Good Luck.
Just follow the steps below.
First, Login to your blogger account, click Design, click Edit HTML, then click Expand Widget Templates.
Find code below (hit Ctrl+F on your keyboard).
]]></b:skin>
and replace with this code:.crop-containr{float:left;width:160px;height:120px;border:1px solid #ddd; background:#f3f3f3; margin:0px 10px 1px 0; padding:3px;}
.crop{overflow:hidden;width:160px;height:120px;border:0px solid #eaeaea;}
.crop img{margin-top:-6px;margin-left:-6px;opacity:1;}
.crop img:hover{opacity:.7;}
]]></b:skin>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 400;
summary_img = 300;
img_thumb_height = "";
img_thumb_width = 190;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore by Kentshin - http://blogthemeplates.blogspot.com
********************************************/
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 0px 0px 0px;"><div class="crop-containr"><div class="crop"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div></div></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ)+ '...' + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
You can set the size or the appearance by customize the set of the red colored text shown above.
After all, find this code:
<data:post.body/>
and replace with this code: <!-- START Auto READMORE -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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; margin-top:20px; display:inline'>
<a expr:href='data:post.url' style='padding:5px; background-color:#eee;-webkit-border-top-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px;'>Read More</a>
</span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<!-- END Auto READMORE -->
Now, your blog already looks nice and neat. Good Luck.
