To put Auto Read More with Thumbnail into Blogspot

About To put Auto Read More with Thumbnail into Blogspot from Grafity Collection, know whats the reason people looking for To put Auto Read More with Thumbnail into Blogspot. Rate: 4.5 8:25 PM For: To put Auto Read More with Thumbnail into Blogspot

I think all of you already know the function of the Read More or Continue reading,etc,, and also you must already know putting the read more on blogspot, there are two versions, namely manual and automatic. On this article i just wanna share the Auto Read More With Thumbnail script.



Now Sign in to your Blogger Account, go to Layout > Edit HTML, check Expand Widget Templates box.
Find the code </head> , and put the following code before it:

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 100;
img_thumb_width = 100;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore with thumbnails script (for blogspot)

(C) 2010-Des by Ansen

visit http://hansenpunya.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 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>


Note: You can change the numeric numbers in the code above according to your need.
summary_noimg = 350; is post cut height without image
summary_img = 250; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 100; is thumbnail image width

Then scroll down and find this code <data:post.body>  or  <p><data:post.body></p>  just the same.

Replace it with the code below:

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

<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'> Read More.. "<data:post.title/>"</a></span>

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


Preview your Blog, just save it if it show Read More with Thumbnail (if your blog post have an image). About To put Auto Read More with Thumbnail into Blogspot, geting point 4.5