How To Add Auto Read More with Thumbnail to Blogger/Blogspot
Here is how you can simply add auto read more with thumbnail to blogger/blogspot and it comes with everything you’ll need. If you decides that you want to show your post titles, thumbnail and few words on your blogger blog homepage, then this will do exactly that for you.
The script is updated to make your website loads faster and doesn’t take a single loading time, and we all know, that our blog loading speed is essential to our ranking on Search Engines.
I also published a tutorial for bloggers, who would love to Show Only Post Title on Home Page in Blogger Blog/Blogspot
This tutorial will help your posts show in your blog homepage with a automatic “Read more” button and thumbnail. So there is absolutely no need in adding the “break” button whenever you are publishing post on your blogger blogspot.
This is a custom way which will beautifies your blog and ensures your readers, a fast navigation through your website.
Unlike other Automatic Read More script, this script will also make your posts excerpts, on the main blog page (Homepage), Label/Category page, and archive pages.
How To Add Automatic Read More feature in Blogger Posts
1: The very first step is to log-in with your blogger account and from the blogger dashboard navigate to blogger template > Edit HTML.
2: Now proceed and click anywhere inside the HTML area and press CTRL + F to activate the search box and then type or copy paste the code shown below inside the search box and HIT enter.
Important Note : It is very important to note here, that after hitting the enter, you’ll find this code more than once but you need to stop at the second or third one.
Now, to add the automatic read more, just replace the above code with the code below:
Click Save to save the template and preview it.
However, if this doesn’t work, please try to replace the second <data:post.body/> or the third one as well.
Next search for
</head> tag, then copy the code below and paste it just above the </head> tag.
For those who wants to tweak this to their own taste, just follow the guides below.
- You can choose to change the number of characters shown when there is no thumbnail, just go and modify the 490 value in blue. While for the number of characters shown when a post has a thumbnail, modify the 400 value to your own chosen number of characters you want to show in the excerpts.
- While for those who wants larger thumbnails, modify the 160 (height) and 180 (width) values in red.
You’ve done everything right, just click on the “Save Changes” button.
If you have any question regarding this, then use the comment box to reach us. We’ll be happy to help you 😀