How To Add ‘Read More’ Link with Thumbnails | Blog Tips

"Read More" is one of the leading popular Blogger hacks that make the blog more professional like. Short story of your latest posts in Homepage with "Read More" link help visitors to read summary before full post. Visitors can navigate their interested post easily which will make them stay more times in your blog. With this hack before each summary there will a thumbnail image to make it more beautiful. This Blogger Trick will automatically create post summaries with thumbnails.






Steps to add 'Read More' Feature with Thumbnails


1. Login to Blogger.com. From Dashboard->Layout->Edit HTML
2. Click on " Expand Widget Templates ". Now search for </head> tag.
3. Just before this </head> tag add the following code:
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>

You can change the following value as your choice.
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 80; //Thumbnails height;
img_thumb_width = 70; // Thumbnails width;

4. Now scroll down to find this code: <data:post.body/>
Now replace the above code with following code:
<b:if cond='data:blog.pageType == &quot;item&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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'>
<a expr:href='data:post.url' rel='bookmark'>\
<b>Reade more >></b></a></span>
</b:if>

You are done. Now save your template. I hope you like this Blogger Tips. For Latest Blogger Tips keep in touch.

Comments Post a Comment

Okami - June 26, 2009

I could not get this tip to work, I receive the following error:

We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "script" must be terminated by the matching end-tag "".

Russel - June 27, 2009

Hey Okami,
I have modified the code. Now you can use it. Thanks for your response.

GerBel's Cage - July 09, 2009

Reference the comment by Okami on June 26.... I am having the same problem although I am using the code you said you modified.... Any suggestions? Also, why does the Brownline template not download?

Okami - July 10, 2009

Got it to work - thanks. But I think that I've decided to leave as is for now.

Simply M - August 23, 2009

I did get this to work however:

1....the post's paragraphs became all one w/ sentences just running on. None of my editing/spacing showed. (as an example the space in this post under my first sentence would be missing)

2....the posts where I had videos no longer show the videos

I've removed your code for now can you tell me how to add it & correct these problems, please?

Thanks!

Leave a Comment