Automatic Read More Hack For Blogger With Thumbnail

By default Blogger shows all the contents from your post on your blog homepage. Having everything on your homepage will make your blog homepage load slower. This might result in getting lower page views as your readers can read all your posts on a single page. So, it’s better to give a summary of your posts on your blog’s homepage and then add a ‘read more’ link below that post summary. In this Blogger Tutorial i have a script that automatically converts your posts into read more summary in your blog homepage

Features

• No need of adding jump break
• Your posts will be displayed as short summary with a read more link
• You can choose how much text is displayed in the summary
• An image from your post will be re sized as a thumbnail and displayed beside the summary
• You can choose the size of the thumbnail

Automatic Read More Hack For Blogger With Thumbnail Demo

Live Demo

How To Add Automatic Read More Hack On Blogger With Thumbnail

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Copy the code shown below and paste it Before/above </head>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.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)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;
</script>

• Now find the code shown below

<data:post.body/>

• Replace it with the code shown below

<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/>
<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

• Now save your template

Customization to the widget

summary_ noimg= 550; >> Length of the summary if the post does not have a thumbnail.
summary_img = 450; >> Length of the summery if the post have a thumbnail
null_thumb_height = 150; >> Height in pixels of the thumbnail.
null_thumb_width = 200; >> Width in pixels of the thumbnail.

Like it? Share it.