How To Add Auto Read More With Thumbnails On Blogger

Auto_Read_More_Script_With_Thumbnail_Blogger_Blog Do you own a Blog or website powered by Google’s blogger aka blogspot? Do you want to add automatic read more inserted after predefined number of words on your homepage or category pages? Are you looking for the best 100% working script so as to help you turn your site to the very way you want it to be? Regardless of your answer to the above questions, this tutorial has it all and just for you.

In order to add auto read more with thumbnail (images / photos) on Blogger powered blogs and sites, all you need is to simply follow the procedures and step by step guide in below this post. And once you are done with the script integration, a simple reload of your blog or website homepage will return it the way you see the image..

Steps to adding Auto Read More with thumbnail on Blogger

Blogger Template Edit HTML

1. Log into the Blog you want to add the “automatic read more”.
2. Navigate to menu and click on Template.
3. Click on Edit HTML and wait for page to load.

Blogger Source code editing section

4. On the template, use keys CTRL + F and enter this tag below

[sourcecode language=”plain”] </head>[/sourcecode]

5. Now copy the script below and paste it just above that tag and click on “Save Template”.

[sourcecode language=”plain”]<script type=’text/javascript’>
posts_no_thumb_sum = 400;
posts_thumb_sum = 300;
img_thumb_height = 100;
img_thumb_width = 100;
<script type=’text/javascript’>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = ‘<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="’+ pURL +’" title="’+ pTITLE+’"><img src="’+img[0].src+’" width="’+img_thumb_width+’px" height="’+img_thumb_height+’px" /></a></span>’;
summ = posts_thumb_sum;
var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<style type=’text/css’>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }

6. Still using CTRL + F, enter tag below.

Freebie:- It's free and designed for you! Claim yours here now

[sourcecode language=”plain”]<data:post.body/>[/sourcecode]

7. Replace that tag with the script below and hit save template.

[sourcecode language=”plain”]<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<div expr:id=’&quot;summary&quot; +’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class=’readmore’ style=’float:right;’><a expr:href=’data:post.url’>Read More &#187;</a></span></b:if></b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/></b:if>[/sourcecode]

Reload the homepage of your blog and see if changes have been applied with “Automatic read more”. And just in case full posts are still showing on the homepage, replace all of the two remaining tags in 6 above and save. Chances are that changes will be showing and that is all, nothing more to do.

KWS Adams

My name is KWS Adams. Blogging is my Passion. I love writing and sharing about everything. Connect me on Twitter, Facebook, Google+ and Whatsapp.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By continuing to Scroll or Navigate this site, you agree to the use of cookies. More info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.