Automatically create post summaries with thumbnails

By using this method your blog will automatically create post summaries with thumbnails, advantages of using this method is that your blog will increasingly look professional, in addition, visitors can see a big difference between a home page with a page of posts.

This Tips is Simple embed file .js in the xml templates,

Step by step create post summaries with thumbnails,

go to Edit HTML, check the ” Expand Widget Templates

1. before edit your template, first bakup(Downlod) your original xml template !
2. check the ” Expand Widget Templates
3. Find this code </head>
Copy and Paste this code and place the following code right above it.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 520;
summary_img = 430;
img_thumb_height = 80;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var
d=b.split("<");for(var
c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!="
"&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return
b+"..."}function createSummaryAndThumb(d){var
f=document.getElementById(d);var a="";var
b=f.getElementsByTagName("img");var
e=summary_noimg;if(b.length>=1){a='<span
style="float:left;margin:0px 10px 5px 0px;"><img
src="'+b[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';e=summary_img}var
c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]></script>
</head>

4. Save Templates
5. Now Find <data:post.body> Replace it with


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

<div style='float:left;margin: 10px 0 5px 0;padding:0px;font:normal 13px Georgia;border:none;'>

<span class='rmlink'><a expr:href='data:post.url'>Continue Reading →</a></span></div> </b:if>

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


Save and test Your Template,