How to put automatic Read More with Thumbnail in Blogger Posts? Solved by using javascripts
by: RJDREYES

(Note : By doing this, I expected you have an internet connection and your own blogger account)

1. Login to your Blogger Account, to your Dashboard, then click Template.

2. From the right side, you will see the Backup/Restore then click it.

From here, you can download full template. Click Download Full Template, to backup your Blogger settings. You can also upload your backup template if you don’t like to current changes.

3. After the backup, click Edit HTML.

It will launch the HTML Editor, click Jump to widget and select Blog1.

4. Press CTRL+F on your keyboard, Search the </head>.

Paste the code before the </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 = 500;
summary_img = 400;
img_thumb_height = 200;
img_thumb_width = 200;
</script>

summary_ noimg = 500; – Length of the summary if the post does not have any image/thumbnail
summary_img = 400; – Length of the summary if the post have image/thumbnail
null_thumb_height = 200; – Height (pixels) of the image/thumbnail.
null_thumb_width = 200; – Width (pixels) of the image/thumbnail.

5. Another to search is the <data:post.body/>.

Erase <data:post.body/> and Paste the code.

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

You change the Read More into something like Read More… or Read More >>> or insert an image.

That’s it. Hopefully this helps you out 🙂

(Disclosure: Blogger, Blogger Template, Scripts/Info/Logo/Images/Pictures have a respective copyright. We used it for demonstration purpose only.)

If something in your mind to comment or suggest, please let us know. In our efforts to provide detailed information, there is possibility of inaccurate contents. If you see any mistake or incomplete in our information, please don’t hesitate to tell us. We will fix it immediately as soon as possible.

Related Links / Articles / Entries / References / Sources:
Blogger – Official Site