What is Auto Read More Script?
Mainly Auto Read More Script use for create blog post summary with thumbnail.Expandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”.
Why should you use this script?
It's optimize your blog performance.
Increase SEO [Search Engine Optimization].
Decrease page Load time.
How it's work and features?
It's automatically set first image of your blog post and create summary from your post (according to set no. of word in your auto read more script ).
Float your image left or right both.
Add default thumbnail image when posts don’t have any images.
Option to turn off auto readmore for some first posts.
Option to turn on/off auto readmore for homepage and label page.
Float your image left or right both.
Add default thumbnail image when posts don’t have any images.
Option to turn off auto readmore for some first posts.
Option to turn on/off auto readmore for homepage and label page.
How to install Auto Read More Script-
- First go to Blogger Dash Board>>Template>>Edit HTML
- After find the </head> tag and paste the below code before </head> tag.
<script type="text/javascript">var summaryConf = { showImage: true, imgFloat: 'left', imgWidth: 120, imgHeight: 90, defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Jxe1LkGZUiJRGoo9nfbNu-m51RC31YMmcYvIe-d4_BUFbNozQ1M5MmDxKQWBoQD1zDaqpckkv8JpDMsNPTOXTNKUzuXTi8tPcj8T50gbMUb4hCr1BgiVUWEMXcUF2rLMB9LyUnc92hOs/s1600/no+thumbnail+available+.png', words: 65, wordsNoImg: 80, skip: 0, showHome: true, showLabel: true};</script><script type="text/javascript" src="https://googledrive.com/host/0Bx4EcEKX-gK0NzRVeXlNdEh6N2M"></script>
After that , find this below tag/line in your Blog Template code.
<data:post.body/>
Replace with:
<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == "index"'> <script type='text/javascript'>summary("<data:post.id/>")</script><b:else/> <b:if cond='data:blog.pageType == "archive"'> <script type='text/javascript'>summary("<data:post.id/>")</script> </b:if></b:if>
Save All and exit. See the blog - Read More Script Work Perfectly or Not.
How to customize these options-
The options are very easy to change. It’s declared in the first part of script above. These are their meanings:
showImage: do you want to show thumbnail? If yes, set it true, if no, set it false.
imgFloat: there are 3 values of this option: 'left' – float thumbnail to the left, 'right' – float thumbnail to the right and 'no' – no thumbnail float. Note the quotes around values.
imgWidth and imgHeight: thumbnail size.
defaultThumb: default thumbnail URL, used when posts don’t have any images.
words và wordsNoImg: number of words shown in summary when have thumnail and no thumbnail.
skip: skip some first posts, don’t apply auto readmore for them. If this option is set to 0, all posts are applied auto readmore.
showHome and showLabel: allow or not auto readmore for homepage and label page. true is allowed, false is not.
Adjust these options to fit your blog and enjoy!
Conventional read more vs. auto read more-
| Conventional read more | Auto read more with thumbnail |
| Uses HTML | Javascript |
| Need to insert code in post. | Post is untouched. |
| Length of each snippet can be customized. | Length can be changed, but it affects all posts. |
| Read More is applied only to posts with the code added. | Read More applied to all posts, no exception. |
| No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post). | The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail. |
| The code loads full post but only shows the snippet. | Only loads the snippet. |
We hope all of you enjoy this post and share it. Please drop your valuable comment.
