Add Auto ‘Read More’ Feature with Thumbnails
For your blog to look elegant, you have to have a control of the articles. One thing that I love putting in my blog is the “read more” feature. This thing when put in your blog will minimize the space on your page instead of showing the entire article that will look so bulky. This has helped a lot of bloggers maintain their sites.

On this post I will teach how you will automatically create post summaries with thumbnails or what we called "Read More" in your blog homepage below every blog post summary using a script.

You don't need to add any extra code in every post you will create in your blog. 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”.


With easy to understand tutorial, you will surely learn a lot. I advise that you should apply one by one the steps on this article so that you will be able to follow the procedure well.


What is Auto Read More Script?

Auto Read More Script is a feature that make your blog shows only a part of your posts on index pages, i.e. homepage, 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”. It is auto because it does it automatically based on the general coding command.

Here's How to Add Auto ‘Read More’ Feature with Thumbnails

Step 1. Go to Template >> Edit HTML of your blogger Dashboard.
Step 2. Click on "Expand Widget Templates"
Step 3. Scroll down to where you see </head> tag.
Step 4. Now add below code just before </head> tag.




Costumization: You can change below values as your choice.
summary_noimg : number of character to display when there is no image.
summary_img : number of character to display when there is an image.
img_thumb_height : hight of the post thumbnails.
img_thumb_width : width of the post thumbnails.

Step 5. Now Scroll down to where you see this: <data:post.body/>

Step 6. Replace above code with below code.




Step 7. Now save your template and you are done.

Note: If you have further questions and suggestions about adding auto read more with thumbnails, just post comment below. Thanks 
The Author

I'm Frank from Philippines. born on July 20, 1986 Author of www.theblogservices.net. I was a blogger since July 2010, I have a great passion about blogging and all other stuff online. Follow Me on Google+ or Like our official FB Page HERE

Related Post



0 comments:

Post a Comment