Skip to content

How To Add Post Excerpt With Thumbnail On Blogger Blog Part2

Hey guys, first let me say a big happy new month to you! Blogger blog, is a great platform that some bloggers should think of having a niche site with, why? Because compare to other platforms, they have some more benefits which I know you’ll agree with me. But we are not going to be talking about the benefits or other goodies that blogger blog have but we are going to be discussing the main topic which is “How to Add Post Excerpt with Thumbnail on Blogger Blog Part2”.

Must Read: Top 20 WordPress Plugin I Just can’t Do without

static-blogger

In case you don’t know, I have written about this topic sometimes back but it looks like the code does not have facility for adjusting the excerpt, so today, I will be bringing a good tutorial that you can play with and it is working 100%. If you ask me how I know it is working, i’ll say that i have implemented it on my blogger blog.

How To Add Post Excerpt With Thumbnail On Blogger

Must Read: How To Stand Out From The Crowd, As A Blogger

Without too much talk, let’s go on to the main topic at hand and see what we’ll come up with. I’ll say that I am bringing this tutorial out because a lady requested for it, so let’s roll.

Ok! First go to your blogger blog dashboard >>> Click Template >>> Click Edit HTML. Are you there? If yes! Let’s proceed to the show…

Note: Before you start any coding, it is best to backup so you can always revert if you make any mistake.

Now search for the </head> tag.

To make the search easy, click inside your code box and simultaneously press Ctrl + F key to bring out a special blogger search box like the image below.

blogger-blog-excerpt-image

Have you seen the tag? Right above the </head> tag, paste the below code

[php]<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> [/php]

Have you done that? If yes! That means we have done the part one of the whole series, now let’s move on to the next part if you are ready!

Must Read: My Top 5 Video Editing and Screen Caption tools For Bloggers

Now search for the below code as well.

[php] <b:if cond=’data:blog.metaDescription == &quot;&quot;’>

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

</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> [/php]

Have you seen it? If yes! Replace it with the below code.

[php] <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> [/php]

We have done this post greatly and now, it will be great to add some great touches to the codes by adding our css so it’ll look nicer and presentable.

Search for ]]></b:skin>

Have you seen it? If yes! Paste the below CSS right above the code

[php].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} [/php]

Now click save and you are done with the coding. Now tell me how simple can this get?

Go check your blog out and you’ll see it there.

Note: I am not the owner of this code, it was given to me by a friend and I have used it and it is working great and as normal as normal can get.

Must Read: Keyboard Shortcuts For IPhone And IPad

Now, do you have comments, questions or thoughts you’d like to share with us? Then please do by using the comment box below. Remember that your comments and thoughts are highly welcomed and appreciated

Was this post helpful? Please do click the like button, share us and recommend us to friends because you’ll never know who among your friends might be in need of great information like this.

Do not forget to subscribe to our feed for your latest and fresh updates on the go

29 thoughts on “How To Add Post Excerpt With Thumbnail On Blogger Blog Part2”

  1. Hello Babanature,
    You know i always love it when you post some great tutorial like this. this post was more then helpful. Thank you in advance and i should go and try it and report back.

  2. Thanks for sharing! that is awesome tips for blogspot blogger but I am not currently using blogspot. However, I will share this useful tips because it will benefit other who currently using blogger.

      1. Thanks for responding! Actually, nothing well in my life. I did a big mistake which I feel never corrected it. But I have to wait for my second chance. Thanks again friends

  3. Post excerpts are really an essential thing a blog should have. Because it makes homepage neat and clean. I already had seen many tutorials regarding adding post excerpts in blogger. Thanks for sharing how to add images too with it.

    1. Hello Sriram,
      Exactly, posst excerpt makes blog looks neat and more beautiful and organized. As a blogger, it is advisable to have this feature on all platform that you operate. Thanks for your thoughtful comment and do have a lovely weekend 🙂

  4. The days I used blogspot never though at post excerpt with thumbnail because WordPress is the best platform I enjoy my daily work without fuss & muss :D.

    However this is a nice tutorial, bloggers using blogspot will be very thankful to you man.

    Best regards from I. C. Daniel

  5. Thanks for this piece of tutorial, its been very useful though i don’t really like to toil with codes but i will try my best sha

    1. Hello Tobi,
      Nobody love to play with codes but if you want to see your blog well and kicking, you should learn except you have some extra cash to pay a blog maintenance 🙂 You have finally gotten a gravatar, that’s great!

  6. Hey Baba,
    Nice tutorial about thumbnail on blogger blog i would like to ask you something do we have any plugin to generate thumbnail for wordpress as i have other blog without thumbnail if you suggest anything it will be helpful thanks

    1. Hello Shameem,
      Showing post excerpt with thumbnail those not require any plugins. Just go to your “Appearance” settings and set it up there, but before that, you must always add image in your feature image. What actually shows the thumbnail is the “feature image”. Hope you understand?

  7. Hi Babanature,

    Nice tutorial. This will extremely helpful for those bloggers using Blogger platform for blogging. You have explained the way to add excerpt briefly.

    Keep helping people.

  8. Thank you for the tutorial. But when I try this there is an error in the line with: expr:onclick=

    So I cannot save and use it. I cannot find the error. Can you help me please?

    1. Hello Frau,
      The reason you’re seeing the error is because you did not implement the code properly. Try and do it again and see where you are making the mistake.

  9. Hi there,
    great tutorial and all but I have a small problem. I inserted the code into my blogger.com template as described and everything went smoothly. But when I create a new post on my blog, it doesn’t get shortened at all. At there is is a link at the bottom of the post saying:
    “continue reading (…)”
    But this should be somwhere in the middle of the post, right? So that new posts are shortened and shown only as an excerpt with a thumbnail.

    Any suggestions?

Leave a Reply to Shameem Cancel reply

Your email address will not be published. Required fields are marked *