How To Add Auto ‘Read More’ Feature with Thumbnails

Posted by Lasantha Bandara on January 1st, 2013 File Under : change template, html, image, post47 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.

File Under : change template, html, image, post

47 Responses to “How To Add Auto ‘Read More’ Feature with Thumbnails”

  1. rich cruz says:

    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..

  2. Indian Spicy Recipes says:

    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

  3. Noriko & Aaron Evans says:

    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..

  4. ♥queen♥ says:

    thanks alot..and it really works

  5. total online bd says:

    nice post work it

  6. dattai says:

    love your site

  7. SunnY says:

    hey thanx alot!!! but cant we inherit the default pictures size as thumbnail....

  8. Anonimo says:

    as I change the. js to display links and other small pictures seguntarias within the summary of the cover?

  9. Admin says:

    Thnkx its realy gud looking after adding on my blog www.erazwindows.com

  10. heru says:

    it's works..

    thanks

  11. Susmita says:

    i like thanx its working fin

  12. Admin says:

    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?

  13. thuctc says:

    many thank

  14. shabeeqsha says:

    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.

  15. Dawn Farias says:

    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!

  16. Dawn Farias says:

    Oh no... my pages are automatically truncated. Don't like that but thank you for anyway!

  17. DaViNci says:

    wow!
    I was not expecting this!!!
    Amazing!!!

  18. Muhammad Khairul Fahmi says:

    how can I hide the auto read more all of my menu bar except homepage?

  19. REUS says:

    how to justify the text on post body summary?
    thanks

  20. Admin says:

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

  21. Rafayui says:

    thank's for the tip it's work....

  22. khawer Khan says:

    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.

  23. Aj Banda says:

    thanks for this tip 🙂

  24. eluna says:

    its ok but some description cant't be read just symbol. any comment

  25. prodip says:

    It was so goooooooooooooooooood!!!

  26. abrar says:

    good one

  27. Tareq says:

    Really what i think this is that one for my self

  28. valencia says:

    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!

  29. Chi says:

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

  30. Bonifest says:

    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

  31. Blogger Tutorial says:

    Very beautiful tutorial. Thanks a lot man 😀

  32. SmashingPumpkins says:

    Great tutorial m8. Thanks helping me!

  33. lino says:

    thank you, it works 🙂

  34. Gagan Masoun says:

    hundred times of thanks sir 🙂

  35. jalal says:

    Hai
    Thanks a lot
    You helprd me to include Read more option in my site Thanks

  36. Aniruddh says:

    This works. Can you please help me in improving the style of readmore button?

  37. craftlicious says:

    Thanks a ton works for me perfectly

  38. Surabhi says:

    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.

  39. sekolah tinggi says:

    thks you very much bro,
    newbi here, :p

  40. J. Rose Allister says:

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

  41. siti khadijah says:

    its owsome!!, anyway please help me to autoresize to keep ratio thumbnails image..how?

  42. toar says:

    can you please give me a demo?

  43. simoo says:

    thanks man you the best 😀
    this is really helped me a lot thanks again 🙂

  44. Riyan Sumarno says:

    thanks.

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.