February 2, 2014

Make Blogger Post Thumbnail and Summary on Homepage

Blogger Post Thumbnail and Summary on Homepage
By default Blogger homepage on your blog show full article about your posting, even you already limited how many post will showing, it look long and very long article display on your homepage, except if you set only one post display there, to solve this you need make Blogger post thumbnail and summary on homepage, with so your homepage will have a nice looking with 'Read More' button to click full article.

To do that things above you must login to your Blogger Dashboard, then go to Template menu and click Edit HTML, scroll down and find  ]]></b:skin>, above it copy this code below:

.box-readmore{text-align:right}
a.readmore{padding:4px 15px;text-decoration:none;font-size:14px;background:#666 url() left top repeat-x;border:0px solid #CAC4C4;color:#fff;-moz-border-radius:04px; -khtml-border-radius:04px;left top repeat-x}
a.readmore:hover{background:#222 url() left top repeat-x;border:0px solid #3F7B84;color:#FFF}

Now you have find this code: </head>, above it copy and paste this code below:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 350;
img_thumb_height = 120;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
    //<![CDATA[
    function HTMLtagdrop(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 ThumbnailSummary(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>' + HTMLtagdrop(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
</script>

Last move is find : <data:post.body/>, you will found three code like that, on second code which your found, replace with this code below, or sometimes you have replace the third one, just preview it first to check you replace correct code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify'>
<data:post.body/>
</div>
<script type='text/javascript'>ThumbnailSummary
(&quot;summary<data:post.id/>&quot;);</script>
<div class='box-readmore'>
<a class='readmore' expr:href='data:post.url'>Read More&#187;</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>

Just make sure you preview first before save your template to see the correct results as you wish, but if you save it already, you can return to the previous code by pressing crtl-z (undo).

That's it and thank you.


You might want to see other posts:

22 comments:

  1. You're the only one that worked. Thanks! :D

    ReplyDelete
  2. Excellent tutorial! Many thanks mate.

    ReplyDelete
  3. Hello. I have set my blog as your guide and it is so good but all of images in the posts are so small and now I want to set them become bigger. How do I do? Demo: http://www.wikichoices.com/

    ReplyDelete
    Replies
    1. hello,
      I see your site and its good already.
      Ff you want try this summary and thumbnail guide, and set your image bigger, just set img_thumb_height and img_thumb_width

      thanks

      Delete
  4. Thanks a lot! Do you know how to space between sidebar widgets and the main body pages by any chance?

    ReplyDelete
  5. Disregard question!! I just resolved the sidebar spacing problem
    Thanks for your help again!!

    ReplyDelete
  6. it's not working on mobile version of site
    only displaying read more link on desktop version.

    ReplyDelete
    Replies
    1. I think you must choose custom on template setting (don't use desktop template on mobile view), this is for desktop display and mobile blogger have own display.

      Delete
  7. AWWWWWSOME! I know this is the wrong spelling. Just my emotins speaking as I have been trying to make this work for a while. Your post was the only one effective for me. Thank YOu

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. i am sing iframe codes, so the post showing image with code, how can i settle this,
    i want image and words (if i add words)

    ReplyDelete
  10. thank you
    youtube video not showing, how i can settle this problem

    do you have code for add with html/javascript, cause i can use this code with page and post, i want make 2 line posts( may be one is news and trending videos like that )
    i hope your reply
    thank you

    ReplyDelete
  11. This is the only one that worked best for me. Thank you so much!

    ReplyDelete
  12. Thank you very much,worked for me too

    ReplyDelete
  13. How can i increase Word limit ( paragraph lines ) ?

    ReplyDelete
    Replies
    1. Hi,
      Try Increase this scripts:

      summary_noimg = 400;
      summary_img = 350;

      Delete
  14. So glad I found this! Is there a way to move the title so it is on the right next to the thumbnail as opposed to being on top of everything?

    ReplyDelete
  15. I see the Google AdSense code '(adsbygoogle = window.adsbygoogle || []).push({});' in my blog summary. Can you make it invisible?

    ReplyDelete
  16. Or can I just display the text inside a custom class?

    ReplyDelete
  17. Hi, this is great, but is there a way to make the images link to their post page?

    ReplyDelete