HOW TO ADD READ MORE WITH POST IMAGE THUMBNAIL TO YOURBLOG

●How to Add Auto Read More Post Summary's with image thumbnail To Your Blog:

Step 1

In Your  Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose

Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the

video Below :

Step 2

Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help

find the code -below)

</head>

Step 3

Copy the following code and paste it Directly Above / Before </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-autoreadmore- blogger.js' ></script>

The code in red sets how the post summary's are displayed.Remember if a post has an image it will be re

sized into a thumbnail to be displayed beside the summery.If the post does not have an image just a text

summery will be displayed.

su mma ry_ n oimg= 430; --> The length of the summery if the post does not have a thumbnail.

su mma ry_img = 340; --> The length of the summery if there is an image in the post that will be

converted into a thumbnail.

n u ll_th u mb_h eigh t = 120; --> The height in pixels of the thumbnail.

n u ll_th u mb_width = 120; --> The width in pixels of the thumbnail.

S tep 4. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help

find the code -below

<data:post.body/>

Step 4.

Replace   <data:post.body/> With The Code Below

<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/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <div style='clear: both;'/> <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span> </b:if> </b:if>

Note - You can change the text  Read More to "Continue Reading", "Read Full Post" or  anything you like.

Note 1. You should try to have the first image in your posts as close to square as possible so they work

well when used as thumbnails on your home page.Images that are for example rectangle in shape will

appear distorted when they are re sized.I use a version of this script on this blog and always add an image

at the top of the posts that are close to square, then size then wont make a big impact on the

appearance.Remember it's the first image in each post that is used as a thumbnail.

Step 5  

Save Your Template.

That's it for this Blogger tip, All your posts including all archived posts will now be displayed with a

summary and read more on your home page, labels pages and archive pages.Check out more of our