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 = "float" ;
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>
var thumbnail_mode = "float" ;
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 == "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'>
<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>
<a class='more' expr:href='data:post.url'>
<br/><img src='YOUR IMAGE URL'/></a>
</b:if>
</b:if>
</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.
.post-body {text-align:justify;}
and press Enter.
