Blogger Auto Read more with thumbnail

Update Feb 2010:  Prevent read more from being applied to Blogger (static) Pages by adding static page conditional tag.

auto read more with thumbnailExpandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”.

Not too long ago I wrote a tutorial on how to make a “conventional” read more, this time around we will make an auto read more with thumbnail. Before we go on, let me highlight the differences between conventional and auto read more.

(Blogger’s own read more -the jump break, can be classified as conventional read more)

 

Conventional read more vs. auto read more

Conventional read more Auto read more with thumbnail
Uses HTML Javascript
Need to insert code in post. Post is untouched.
Length of each snippet can be customized. Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added. Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post). The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet. Only loads the snippet.

 

Applying auto read more

Here we go:

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Check the  Expand Widget Templates check box on top right of the HTML window.
  5. In the code window, look for </head> line.
  6. Add the Read More code below right after that line.
    <!-- Auto read more script Start -->
    <script type='text/javascript'>
    var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
    summary_noimg = 430; //summary length when no image
    summary_img = 340; //summary length when with image
    img_thumb_height = 200;
    img_thumb_width = 200;
    </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(thumbnail_mode == "yes") {
     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>
    <!-- Auto read more script End -->
  7. After that, find this line: <data:post.body/>
  8. Replace the line with this code:
    <!-- Auto read more Start -->
    <!-- http://www.BloggerSentral.com -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <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>
    <a class='more' expr:href='data:post.url'>Read more ...</a>
    </b:if>
    </b:if>
    <!-- Auto read more End -->
  9. Click Preview. If it works, then click Save Template.

 

Customizing the snippet

You can customize the read more by changing the values of the variables below:

  1. thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
  2. summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
  3. summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
  4. img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
  5. You can change the words “Read more” with your own by changing it in line 12 of the code in step 8.

That’s it, enjoy!


Before you leave:
  • Do you find this article useful? Share it via Retweet, Share or Stumble buttons below.
  • Any suggestion, question or comment? Please post it in the comments below.

232 comments to "Blogger Auto Read more with thumbnail"

«Oldest ‹Older 201 – 232 of 232 Newer› Newest»
MapMaster February 21, 2012 at 5:49 AM    

Thanks for taking the time to look at what I'm trying to do, Greenlava, and the Blogger HTML gives me an idea at least. I'll experiment and do some more research. I like a challenge, but I'm not sure I like a really big challenge :|

Going back to a previous question, if I wanted to exclude the first post only from the home page but not other index pages, what would I need to change to this code?

[!-- Auto read more Start --]
[!-- http://www.BloggerSentral.com --]
[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/]
[b:if cond='data:post.isFirstPost']
[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]
[/b:if]
[!-- Auto read more End --]

Thanks,

Melanie B March 24, 2012 at 2:10 AM    

Is there a way to fix the thumbnail picture? since pictures are not all the same size, some are looking cramped and squished in the thumbnail.

Sine May 4, 2012 at 2:04 PM    

Hi Greenlava,
it's been working like a charm for me in Chrome, but I just looked at my blog in Internet Explorer (not sure why people even still use it) and noticed that the images all are flattened into a thin line for some reason. Do you know how to fix that? (my blog is www.joburgexpat.com). Thanks!

Kevin May 9, 2012 at 7:23 PM    

Im trying this with www.carshowroom and www.ladyreview.info
but if the post no img it will show the noimg
can you pls tell me how to add no img thumber for defaut

Greenlava May 13, 2012 at 11:01 PM    

@Kevin
Try this:
InserT these lines right after line 37:
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="PUT YOUR DEFAULT IMAGE URL HERE"'+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;

Ojiisan May 16, 2012 at 10:15 AM    

Hey can I change the "READ MORE" into a "READ MORE" box like button ? btw this is really helpful ,thanks.

Greenlava May 16, 2012 at 6:38 PM    

@Ojiisan
Try adding this in the CSS:
.more a {
padding:2px;
background:#ccc;
border:1px solid #555;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
}

Digital Photography News June 14, 2012 at 12:28 AM    

Thanks To this..post It help a lot specialy with my blog home page..thank you..More Power

Azman June 20, 2012 at 10:04 PM    

Thanks a lot my friend, auto read more with thumbnail succeeded !

David Chan July 1, 2012 at 9:55 AM    

Great tips. Thanks for sharing.
But i havn't done.

06Faceless July 1, 2012 at 12:39 PM    

Thank you I've been wanting to do that for some time now.

But I also want to know "how I make the thumbnail clickable so that it behaves like the Read More button?"

Greenlava July 13, 2012 at 12:43 AM    

@06Faceless
Email me for the code.

Jan Plähn July 20, 2012 at 1:26 AM    

Seems like someone copied your article!

http://www.copypastelove.org/2012/06/weiterlesen-im-magazine-look.html?showComment=1342718655064#c6047762928872511506

Dont you want to tell them its yours?

i-St@r Group July 24, 2012 at 3:24 PM    

Really thanks a lot BS

Premnath August 11, 2012 at 9:49 PM    

Thank you .. It worked like a magic ..

Krish September 6, 2012 at 6:52 PM    

hi i applied this code and i set 10 post in front page but it shows 1 post only why?

MC September 8, 2012 at 1:07 AM    

Hi Greenlava,
Thank you very much for creating such wonderful widget!
I have it on my blog..http://thairecipesfrommykitchen.blogspot.ca/

Thanks again!

Majalah Siantar October 2, 2012 at 8:19 PM    

realy usefull for newbie like me..

TGS November 21, 2012 at 12:01 AM    

Can you please tell me after i added this code to the blog, how do i change the home page auto read more section post text and it size?

Thanks!

Greenlava November 22, 2012 at 6:57 PM    

@TGS
Replace the text "Read more ..." in code line 12 in step 8.
To change the font size, add this in CSS:
.more a {
font-size:PU-FONT_SIZE_HERE;
}

amaz December 5, 2012 at 4:00 AM    

is this applicable when i have borders around my post please help

Twitteran December 9, 2012 at 11:38 PM    

Works perfectly on my blog. thx

Anonymous,  December 29, 2012 at 1:09 PM    

This is awesome. But I needed the images to be its original size because I just wanted everything to show clearly. I clicked on some of the Facebook topics but sadly the links were expired.

Then I figured out to tinker the code a bit to set the width and height to maximum width and height in line 35.

Actually, I find JavaScript extremely hard as I am more familiar to CSS styling... :(

That's why I go on better experienced blogger sites like yours to learn more coding :)

Anyways, Thank you So Much! It worked perfectly!

Tip Garden January 19, 2013 at 9:49 AM    

I could use some help. At first I applied the code for:
http://www.bloggersentral.com/2010/04/list-recent-posts-by-label.html

But, my list had each title separated with boxes around each title and only about 9 per page. I found this post with the auto read more w/ thumb nail and wanted to change to that , but can't seem to get it to work. I tried removing the code from my first change and then applying this code but it stays as the first option. Anyway could use some help.

Greenlava January 19, 2013 at 8:33 PM    

@Tip Garden
If you don't mind losing changes you made to your post template, you can reset it before starting over with auto readmore.

samsung tablet murah March 28, 2013 at 10:10 AM    

terimakasih informasinnya mas brow

Anonymous,  April 23, 2013 at 2:41 AM    

Thank you, works like charm

ngnrdgrl May 27, 2013 at 1:38 AM    

At first this didn't work. Then I realized there were three instances of . After replacing all three with the code provided, it worked! Yay!

Ujjwal June 18, 2013 at 4:33 PM    

Great Blog, You are really helping people.

Thanks for helping, keep blogging, best of luck!

Angel Quintana June 29, 2013 at 6:52 AM    

Is there a way to make it so regardless of orientation of the first photo that the thumbnail won't get distorted? I've been looking for this answer for months! Your expertise is always appreciated. :) thank you!

Greenlava June 30, 2013 at 4:20 PM    

@Angel Quintana
What you want to do is set either the thumb height or the thumb width, but not both. That way the thumb will keep the image aspect ratio.
However this won't work in Internet Explorer. The image will come out squished into a single horizontal (if you set the width) or vertical line(if you set the height). Fortunately there's a fix for that, here:
http://productforums.google.com/d/msg/blogger/P2c6Ev6onEY/RZNF6Y90Du0J
(the answer in the forum is for fixed height. You need to switch width and height attributes' values for fixed width)

allnotifications.com July 2, 2013 at 2:52 AM    

I cannot stop my feelings about this post because i search for same trick on several websites but no one give better results.Finally this website gives right one and thanks for sharing this post.These all are true words.

«Oldest ‹Older 201 – 232 of 232 Newer› Newest»
Click to go to top Click to comment