How To Show Only Snippet/Post Excerpt/Some Description With Thumbnails On Homepage In Blogger?

Blogger offers some simple templates that look professional but they have few problems that don't let us use these templates. One of the major problem with these templates is when we post articles on our blog, it starts showing the entire articles on the homepage while other templates only shows some small description/snippet with thumbnails making the blog look more professional and attractive. So if you are the one who want to use the blogger templates but not using it because of this drawback then you can follow this tutorial. Basically there are two ways of doing it one method is given by blogger itself, which is not recommended by me and other is by using some code which will make your blog look professional and attractive. So in this tutorial i will show the two methods of doing this. Below are the two methods of doing this :

Method 1:

• Log in to your Blogger Account.
• Then create a new post or open a post that is already published or ready to publish in drafts.
• Then after few lines from the start add a Jump Break as shown in below screenshots.

• Basically Jump Break feature is used to show the selected content on the homepage not the entire post and it also adds the read more link after few lines like we see in other templates. So use a jump break after few lines to show only a small description of a post on the homepage not the entire article.
• However this feature is not recommended because of the following reasons:

1. You have to add jump break in each and every post.
2. It is difficult for you to add Jump break at equal post length in all posts.
3. It doesn't makes equal frames for images, so if some posts have larger images than others then it will not change their size and show it same as they are, hence makes your blog look unprofessional and less attractive.

Method 2:

This is another approach, here you can add the following code in your template to automatically generate the equal posts description and thumbnails.

• Log in to your Blogger Account.
• Go to Dashboard >> Template >>Edit HTML.
• Before doing any editing in your template please backup your template using Backup/Restore tab.
• In HTML Editor Section press CTRL+F and search </head>.
• Now paste the below code just above </head>

<!--Script for displaying snippet on home page starts here-->
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
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>
<!--Script for displaying snippet on home page ends here-->  

• Now search <data:post.body/> and replace it with the below code.

Note: The above code <data:post.body/> appears three or four times in the code so remove the first,second and fourth one and replace the third one with below code.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

• Now Save your template and you are done.