How To Add Auto Read More Button With Thumbnail in Blogger Blog?

Hello Friends! Hope that all of you are doing well. Today I have an important feature of Blogger to share with you. This feature is ‘Read More’ function.  Read More option enables us to show the some portion of the blog posts on the home page of blog or on the indexed or label pages. This is helpful feature because it is better to show more posts on the home page rather than showing a full lengthy single post.

This feature is coming inbuilt the new Blogger templates. But many Blogger Templates do not contain this feature and they show the full post on the blog or we have to manually add read more (Jump Break) between posts. Below I published the steps and code to add automatic read more option with thumbnail in your Blogger Template.

Auto Read More Button With Thumbnail.

• First of all login into your Blogger account and select your blog.
• Then go to Template > Edit HTML option.
• Find the </head> tag in your template by pressing Ctrl + F.
• Copy and paste the below given codes just above the founded tag.

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
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>
<!-- Auto read more script End -->

• Now find this code: <data:post.body/>
• Replace this code with the code given below:

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<!-- http://www.hififun.net -->
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

• Replace all if there is more than one code.
• Save your template by clicking the Save button.
• Done!

Test the working of this code by visiting to your blog.

Customization

If you want to customize the read more button with thumbnail then make the changes as explained below:

• thumbnail_mode - change its value to ‘Yes’ if you want to show thumbnails along with post texts.
• summary_img – Specify the number of characters you want to show with the thumbnail.
• summary_noimg – Specify the number of characters you want to show without the thumbnail.
• img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
• If you want to show something else instead of Read More text then you can change it with your own text.

I hope that this tutorial is helpful for you. If you are facing any problem or want to share your own experience then please explain it the comments bellow.

Thanks!

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!