Infolinks

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.
 AutoRead More with Thumbnail Image in Blogger Post

2. From the right side, you will see the Backup/Restore then click it.
 AutoRead More with Thumbnail Image in Blogger Post

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.
 AutoRead More with Thumbnail Image in Blogger Post

3. After the backup, click Edit HTML.
 AutoRead More with Thumbnail Image in Blogger Post

It will launch the HTML Editor, click Jump to widget and select Blog1.
 AutoRead More with Thumbnail Image in Blogger Post

4. Press CTRL+F on your keyboard, Search the </head>.
 AutoRead More with Thumbnail Image in Blogger Post

 AutoRead More with Thumbnail Image in Blogger Post

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

 AutoRead More with Thumbnail Image in Blogger Post

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

Related Posts Plugin for WordPress, Blogger...
Share
5 thoughts on “Auto Read More with Thumbnail Image in Blogger Post”

Leave a Reply

Your email address will not be published. Required fields are marked *