Add Auto Read More with Thumbnail and Summary to Blogger/Blogspot

Content is the heart of a blog. Still, an unprofessional looking blog can give a bad impression to your audience and you may lose your visitors. Another important thing is making your blog user-friendly. To do these, we have to customize our blog and make a few changes to our default blog template. Talking about customization, auto read more with the thumbnail and summary is a very important feature to make a professional blog. In this article, I will discuss it.

(Visit "Step by Step Blogger Tutorials" to get all blogger tutorial sequentially)

What is Add Auto Read More with Thumbnail and Summary?

When we will use this feature, this will make changes on your homepage of the blog. Suppose you have published 10 posts on your blog. In default blogger template, on the homepage, you will see all posts one after another. That means, your visitors can read all posts from the homepage by scrolling down. But, it is not expected for the betterment of your blog. So, we will limit the post body on the homepage. We will show post title with 2/3 sentences or a summary of each post on the homepage. We will also show a thumbnail for each post to attract our visitor. In this way, there will be a read more button after post summary which means visitors have to click on read more button to read the full post.

Why should you use Add Auto Read More with Thumbnail and Summary?

If your audience could read all posts on the homepage, how would you expect multiple Pageviews from single visitors? It will increase your blog's bounce rate which is very bad for SEO. So, this feature can give you more Pageviews as well as lower your blog's bounce rate.

Another thing is page loading time. If your homepage shows your all contents, it will slower page loading time which is also bad for SEO. Also, your visitor will lose interest on your blog. This feature reduces your blog loading time by reducing homepage contents.

Auto read more feature also increases exposure of your all posts to your visitors. Your visitors may not like to read your all posts. So, showing post's title, summary, and thumbnail, this feature helps them to choose the posts they want to read easily. That means, it makes your blog user-friendly.

Also, post thumbnails make your post more attractive.

What do you have to do?

You have to edit HTML code in your blogger template to add this feature.

How to Add Auto Read More with Thumbnail and Summary on Blogger/Blogspot?

1. Go to your blog's dashboard in blogger. Then, click on "Theme" from the left side and click on "Backup". Next, click on "Download theme" to keep a backup for your blog theme. because the reason is if you failed to edit HTML successfully and, it damages your theme, you can upload this backup file later.

Now, click on, "Edit HTML". Click once inside the coded box and, type CTRL+F. A search box will appear. Type </head> in search box and press "Enter". Then, copy the following code and, paste it above the </head> tag.

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 160;
img_thumb_width = 180; 
</script>
<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }

var summary = imgtag + '<div>
' + removeHtmlTag(div.innerHTML,summ) + '</div>
';
 div.innerHTML = summary;
}

//]]>
</script>

You can change the value of below codes according to your need.

* summary_noimg tells you the number of characters to show in summary when there is no thumbnail or, image.
* summary_img tells you the number of characters to show in summary when there is a thumbnail or, an image.
* img_thumb_height tells you the height of the post thumbnails/images.
* img_thumb_width tells you the width of the post thumbnails/images.

After that, type <data:post.body/> in the search box and, press "Enter". You will find 2/3 <data:post.body/> tag. Copy the following code. Then, select second code in HTML editing box and, replace it with this code. (You have to hit "Enter twice to reach the second tag.)

4. Click on "Preview theme". If it takes load successfully, click on "Save theme".

Note: If it doesn't make any change, do same with third <data:post.body/> tag.

Enjoy!