How to add automatic Read More Button with thumbnail in Blogger

Here is the post about how you can add automatic Read More button with thumbnail and summary of the post on your home page. Follow the below steps to add automatic read more widget for each post and you can also find the solution how to justify the text appear on the home page of the blogger.

Read More button on Blogger

• Log in to your Blog
• Click on Template
• Then Click on Edit HTML

Find </head> 

and replace it with the below 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://bloggergadgets.googlecode.com/files/excerpt_min.js' type='text/javascript'/>
</head> 

Then find <data:post.body/> and replace with below code 

<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'>
<br/><img src='YOUR IMAGE URL'/></a>
</b:if>
</b:if> 

Replace 'YOUR IMAGE URL' with the Read More image URL of yours, i.e. 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQDYjvMG3YBtKSmi1rsDqy-6N8CmESJQ4cOpAVsqHprht8f6p9_sPIkUfI5ldD_fB9yu-pVw_pxhPFrgGdSlJqqJ4e5skRMUqlmgZ5RmpBRskCoOsJ230ZOhO1vp5IPfdZxPnJeMFS8Xz/s191/Read+More.png' and now you have the auto read more plugin for your blog.

Variations:

summary_noimg = 230;

Here you can set the number of characters (with space) to be shown, when do not have an image on the post(change the number 230 as per your choice)

summary_img = 140;

Set the number of characters (including space) to be shown in the summary with thumbnail

img_thumb_height = 100;

img_thumb_width = 100;

Here you can customize the size of the thumbnail image

How to justify the text on Read More thumbnail summary

Go to Template --> Customize --> Advanced --> Scroll Down and click Add CSS

enter the below code
.post-body {text-align:justify;}
and press Enter.