How To Add Auto ‘Read More’ Feature with Thumbnails

Posted by Lasantha Bandara File Under : change template, html, image, post 47 Comments

This nice trick will automatically create post summaries with thumbnails. You don't need to add any extra code in every blogger post that you make.

Tutorial Updated : Jan 1, 2013

1.Go to "Template" --> "Edit HTML" of your blog.

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code just before </head> tag.

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</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>

Note : You can change below values as your choice.

summary_noimg : number of character to display when there is no image.
summary_img : number of character to display when there is an image.
img_thumb_height : hight of the post thumbnails.
img_thumb_width : width of the post thumbnails.

5.Now Scroll down to where you see this:

<data:post.body/>

6.Replace above code with below code.

<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

7.Now save your template and you are done.

«
»

47 thoughts on “How To Add Auto ‘Read More’ Feature with Thumbnails”

  1. finally, i found what am i looking for,, fave u at technorati.. visit my site and i'll appreciate ur comment so i can better improve it..

    Reply

  2. Finally, i found what am i looking for, its works perfectly. I am really thankful to you for sharing such a useful tips...

    If you get a chance, please visit my blog and let me know how to improve my site appearance to attract the visitors ("http://indian-spicy-recipes.co.cc" or "http://indian-spicy-recipes.blogspot.com")

    Thanks and regards,
    Indian Spicy Recipes

    Reply

  3. is there any way to take all of the images attached to my post (let's say I'm emailing from the road) and make them all into thumbnails at the bottom of the summary? This draws readers in without making them scroll for ages through giant images... maybe in rows of 5 or so?
    This is what I want. you see it a lot on celeb blogs..

    Reply

  12. Thanks! But there is a problem that it appears on my About Me and other page and don't give full descriptions please help me that How can I set this problem?

    Reply

  14. Thanks..
    Still one problem , when i click on thumbnail open in window only picture, why not open the post. how i link thumbnail to post.

    Reply

  15. Thanks a lot! This worked very well for me. One note, though, there's an extra 'E' at the end of 'Read'.

    This was such an easy hack and exactly what I was looking for. Do you know of a way to only shorten archived posts, and not the posts showing on the home page?

    Thank you!

    Reply

  20. thanks for the easy and quick tutorial for making read more with thumbnail.. great post.........thanks

    Reply

  22. I have added the code some time it works it shows only image and summary.And sometime the code does not work it shows directly full post with read more option under post.How to solve this problem.

    Reply

  28. Hi, thanx for this guide! It works great!

    But i got a problem: the excerpts don't look formatted. No text colour, no line breaks, no italic...
    How can I fix it?

    Thanks in advance!

    Reply

  29. I've used this code and it worked wonderfully at first, thank you! But a few days ago it stopped working, and I realized that's because http://keerthiset2.110mb.com/excerpt.js is no longer active 🙁 Will you be able to show us (me and anyone who stumbles across this article again) what the codes it contained? (my bad for not hosting the js in my own server in the first place - I just copied the codes directly) I'll really really appreciate your help! 🙂

    Reply

  30. Hi, maybe you should have hosted the js file elsewhere, like in google not

    I have as well experiences the same as @Chi above. We need the file to be hosted in a reliable place

    Reply

  38. Hi,

    Thanks for the code. It works fine but I have a small problem. When I use this, the formatting of my post is lost. I want the summary of the text to look as it looks in the full post - justified and with proper spaces etc.

    Please help.

    Reply

  40. THANK YOU! I somehow accidentally corrupted the auto read more on my template, and your tutorial here fixed it right up. Whew!

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.