Post Preview With Read More and Thumbnail on Your Blogger Home Page

Post Preview With Read More and Thumbnail

Do you want to have posts that look like the picture above on your blogger home page? Certainly! It looks much nicer. By default blogger shows the full posts in the home page and as a result readers find it boring and tiring to do much scrolling down just to get to the other posts on your blog. Not efficient really. Well just to help your readers it is a good idea to have a summary of your posts on your blog’s homepage and then add a ‘read more’ link below the post summary. Let me show you how to do it.

1. Login to Blogger then click on Dashborad

2. Click on Drop Down Menu and select Template
3. Backup your current Template before making any changes to your blog
4. Now Click on Edit HTML
5. Press Ctrl + F and search </head>
6. Paste below code before </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>

7. Now find <data:post.body/>
8. Replace it with the code 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>

9. Now Save your template.

By default your posts would look like the picture above, but if you'd like to customize the look to your desire, below is the guide for you. Just change the numbers and make experiment.

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.

Well that's the guide how you change the look of your posts on blogger home page. Wish your readers be more pleased to read through all your posts with ease.