How To Show Post Excerpts On Blogger Homepage.

Here in this blog we have provided you many tweaks and tips of Blogger. Today we are here again with a different blogger tweak. This post is about how to show post excerpts on homepage instead of full posts. This tweak will show thumbnail of your post and a continue reading link on homepage. Full instruction is given below, follow them.

Steps To Follow :

It is always advisable to backup your template before doing any kind of tweaking in your codes.

1) Log in to your Blogger Account and goto your Blogger Dashboard.

2) Go to Template>Edit HTML>Proceed.

3) Tick the 'expand widgets' box.

4) Press Ctrl+f and Search </head>. Just above the </head> tag, copy and paste the code given below.

<script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 300; summary_img = 350; img_thumb_height = 200; img_thumb_width = 300; </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>

5) Now Search <data:post.body/>.

Replace it with the code given 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'> continue reading "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>

You can change the continue reading "<data:post.title/>" to any text (for example, READ MORE, Full story etc.).

6) And finally save the template.

You are all done and now check your blog. Drop comment if finding any kind of problem.
For more Blogger tips and tricks, browse this blog. Keep visiting this blog for more updates.