Blogging Tips

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.

Another huge benefits of adding this feature to your blogspot blog, is that it will enabled you, to show your posts in the homepage and index pages with the title, a short summary with the number of characters and a thumbnail, thumbnail in the post will be generated automatically through JavaScript. And the thumbnail will be chosen from the first image uploaded inside the post.

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

add auto read more on blogger blogspot posts widgets

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.

<data:post.body/>

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:

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’> <b:if cond=’data:blog.pageType != &quot;item&quot;’> <div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div> <script type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>  <span class=’readmore’ style=’float:right;’><a expr:href=’data:post.url’>Read More &#187;</a></span></b:if></b:if> <b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if> <b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/></b:if>

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.

<script type=’text/javascript’> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </script> <script type=’text/javascript’> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf(“<“)!=-1) { var s = strx.split(“<“); for(var i=0;i<s.length;i++){ if(s[i].indexOf(“>”)!=-1){ s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length); } } strx = s.join(“”); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+’…’; } function createSummaryAndThumb(pID, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = “”; var img = div.getElementsByTagName(“img”); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = ‘<span class=”posts-thumb” style=”float:left; margin-right: 10px;”><a href=”‘+ pURL +'” title=”‘+ pTITLE+'”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px” /></a></span>’; summ = posts_thumb_sum; } var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’; div.innerHTML = summary; } //]]> </script> <b:if cond=’data:blog.pageType != &quot;static_page&quot;’> <b:if cond=’data:blog.pageType != &quot;item&quot;’> <style type=’text/css’> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}  .readmore a {text-decoration: none; } </style> </b:if> </b:if>

Important Note

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 😀

We will be happy to see your thoughts

Leave a reply