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
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.
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>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.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);
}
}
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;
}
//]]>
</script>
<b:if cond=’data:blog.pageType != "static_page"’>
<b:if cond=’data:blog.pageType != "item"’>
<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; }
</style>
</b:if>
</b:if>[/sourcecode]
6. Still using CTRL + F, enter tag below.
[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 != "static_page"’>
<b:if cond=’data:blog.pageType != "item"’>
<div expr:id=’"summary" + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class=’readmore’ style=’float:right;’><a expr:href=’data:post.url’>Read More »</a></span></b:if></b:if>
<b:if cond=’data:blog.pageType == "item"’><data:post.body/></b:if>
<b:if cond=’data:blog.pageType == "static_page"’><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.
