In this script it will automatically show post summary and and the first Photo of the posts along with Read more link in it.
It works on the main blog page (homepage), category pages, and archive pages.
Follow these simple steps to use this feature:
Step 1. Go to Blogger dashboard, go to Template and click on the Edit HTML button:
<data:post.body/>
Note: after hitting Enter, you’ll find this code more than once, you need to stop at the second one.
Step 3. Replace the code above with this one:
<b:if cond=’data:blog.pageType != "static_page"’>
<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/>","<data:post.url/>","<data:post.title/>");</script>
<span class=’readmore’ style=’float:right;’><a expr:href=’data:post.url’>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>
Note: if you don’t see any changes after going through all the steps, please try to replace the third <data:post.body/> as well.
Step 4. Now it’s turn to search this head tag closing:
</head>
Step 5. Just above the </head> tag, add the following code:
<script type=’text/javascript’>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = ‘<span class=”posts-thumb” style=”float:left; margin-right: 10px;”><a href=”‘+ pURL +'” title=”‘+ pTITLE+'”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px” /></a></span>’;
summ = posts_thumb_sum;
}var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}
//]]>
</script><b:if cond=’data:blog.pageType != "static_page"’>
<b:if cond=’data:blog.pageType != "item"’>
<style type=’text/css’>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Note:
– To change the number of characters shown when there is no thumbnail, modify the 490 value in blue. For the number of characters shown when a post has a thumbnail, modify the 400 value.
– If you want larger thumbnails, modify the 160 (height) and 180 (width) values in red.
Step 6. Click on the Save template button to save the changes.
You are done now…just have a look to your blog design.
