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;
&nbsp;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 Find the portion of code that looks like the code given below:.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
&nbsp;<! Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div> <b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats
>
</div>
&nbsp;</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/></a>
</div>
</b:if>
Replace it with the code given below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> continue reading &quot;<data:post.title/>&quot;</a></span> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> </b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='padding-top:3px;float:right;text-align:right;'><span class='rmlink'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='margin-right:10px;'>Add Your Opinion</a></span><span class='rmlink'><b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Opinion<b:else/><data:post.numComments/> Opinions </b:if></a> </b:if> </b:if></span>
<div style='clear: both;'/>
<div style='clear: both;'/>
</div>
</b:if>
</b:if>
</b:if>
You can change the continue reading "<data:post.title/>" to any text (for example, READ MORE, Full story etc.).

6) For Styling part i.e for CSS part:-

Search ]]></b:skin> and above it paste the following code

.rmlink a{color:#fff; text-decoration:none; float:right; font-family:Arial,Helvetica,sans-serif; padding-left:5px; padding-right:5px; padding-top:-2px; font-size:13px; font-weight:bold; text-align:center; background:#444343; -moz-border-radius:5px; -webkit-border-radius:5px; height:22px} .rmlink a:hover{color:#FFF; text-decoration:none; background:#007EC4; -moz-border-radius:5px; -webkit-border-radius:5px}
7) 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.

22 comments:

  1. Hi I'm Satyakam Pradhan from Bloggers, I'm very grateful for following your blog. Thanks for this great post. I just tried it on my blog and it was wow

    ReplyDelete
    Replies
    1. Thanks 4 dropping your valuable comment here.

      Delete
  2. hi Abhijit for this tutorial.
    I've been trying to get this done for a while but haven't been able. There are 3 lines that finish with the data:post.title tag. What can I do?
    Thanks!

    ReplyDelete
    Replies
    1. Give me the link of your blog here.

      Delete
    2. http://muymajobv.blogspot.it/

      Delete
    3. You are getting 3 data:post.body/ tags. Replace the second one with the code given above in the post.

      Delete
    4. I've just done it and it didn't work :(

      Delete
    5. I can do it for you if you are ready to give me your blogger username and password. Just mail me here - something619a@gmail.com

      Delete
  3. I just tried it! It works. Thanks for the tips!

    www.blog.thednalife.net

    ReplyDelete
  4. nice tips..10nx 4 sharing..
    http://www.i-world-tech.blogspot.in/

    ReplyDelete
  5. Thanks for your nice Post.
    I have tried, and it has increased my visibility much more.
    Keep on posting.


    http://bio-pro.blogspot.com

    ReplyDelete
  6. Hi, the code listed in Step 5) doesn't match up with the code on my blog's template at all! Can you help me with it? :(

    ReplyDelete
  7. it work on my blog, but i can control the number of post displayed

    ReplyDelete
  8. Nice blog and interesting post also visit my gaming blog www.topgamespoint.blogspot.com

    ReplyDelete
  9. Hi! I just did this successfully but had to undo it because the pictures that were associated with each blog title were skewed. Do you know if there is something I can do to fix that? Other than that it was pretty awesome! I have been looking for a way to do this.

    ReplyDelete
  10. You are awesome, thank you! :)

    ReplyDelete
  11. Hi, Thanks for your nice guide. I just want to know how to enable link in post excerpt.

    ReplyDelete