Tuesday, 11 August 2015

Add Auto Read More with thumbnail for Blogspot/Blogger Posts

The most effective method to make posts in the online journal landing page to be shown with a programmed "read more" catch and a thumbnail. 

To be more particular, this will demonstrate the title of the post, then a short outline with various characters and a thumbnail, that will be the thumbnail of the first picture transferred inside the post. After the thumbnail and the post outline, there will be a "Read More" connection, which when you tap on it, will take you to the genuine post. 

This Automatic Read More script will compress substance and a post rundown will be indicated just on the primary online journal page (landing page), classification pages, and chronicle pages.

Adding the Automatic Read more Button on Blogger

  • Step 1 : Go to Blogger Dashboard and Select Template and then select Edit HTML to open your Template code.

  • Step 2 : Now on your Blogger Template search for this code , Note that this code appears three times on blogger, you got to find the third one.
  • Step 3 : Replace the third <data:post.body/>  code with this code
<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>

Step 4 : Search for </head> and just above it Paste this code

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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;

<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; }

Step 5 : Save your Template and from there you will see it work

Suppose you have any questions on the this tutorial, please feel free to leave them in the comments box below.

Sifiso Nkwanyana

Author & Editor

I hope you have recieved all the information you seek and thank you once more for browsing our website we hope to hear from you soon.


  1. how to put the image at the center?

  2. Hi Cheryl I will recommend that you leave the position of the image the way it is or just make it float to the right instead of the left but I will show you how to chang the img position.

    simply search for this code on the codes listed on this post:

    <span class="posts-thumb" style="float:left; margin-right

    on the code replace left with center or right depending on the position you want. special thnx

  3. Hi! Can I change the position of the "Read More"? I want to place it to the right and make it a little bit bigger.

  4. i have been trying all the time with same codes but still won't work...i need help here seriously, about this code , i only have one of it...

  5. Thank you very much, it works and i did it to my blog

  6. Wow that's a wonderfull blog having all details & helpful. Business Suite and Center

  7. Wow that's a wonderfull blog having all details & helpful. Business Suite and Center


Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep it in mind that we respect all comments by our readers but all spam comments and spam links will be deleted. Thanks for understanding!