USEFUL TRICKS- InVaDeR: AUTOMATIC READ MORE TAB WITH THUMBNAIL FOR BLOGGER

In this tutorial you will get to know how to automatically summaries or diminish the whole post which also improves you blog layout. In short in this post you'll learn how to add automatic read more link (with thumbnail) blogger trick is a very popular hack that takes your expanded blogger posts and shortens it with a short summary and a thumbnail photo. The beauty of this hack is it automatically shortens your blogger posts into a brief and organized short summary of under 500 words (the number of summary words is actually adjustable --more on this further in this post).

In addition to that wonderful ability, it finds the first photo within your post and makes a thumbnail of it.

Why should you use it?

This awesome trick helps with your page's load time. Having long blogger post on your home page slows down the load time of your page, which can be a nuisance for your visitors. I personally don't visit pages often if I know that blog loads slow. Another reason why you should use it is because Google now looks at your website's load speed as one of the over 200 signals they use to judge what your overall search rankings will be. So if you do have a slow loading page with long blogger posts, you are hurting your traffic results.

Here the tutorial begins:

Login to your Blogger Dashboard.

Click on Template tab.

Click on Edit HTML Tab.

Check on "Expand Widget Templates".

Press Ctrl+F, and a search box appears.

In your search box, copy and paste this </head> tag and once it's highlighted in your blogger template, copy and paste the below code just before the </head> tag.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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(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 adjust the numeric numbers based on your preferences. Just scroll back up to change it. The numbers are color coordinated for easier access.

summary_noimg = 430; is the post summary without any images in your post
summary_img = 340; is the post summary with a thumbnail image added to your post
img_thumb_height = 100; is the thumbnail height of your image
img_thumb_width = 120; is thumbnail image width

Now search for <data:post.body/> in your template and replace it with below codes.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>