Add Auto Read more button with thumbnail to Blogger posts

The bending blog
       presents..
                           Automatic read more button on blog
Well i will be teaching you how you cann add a "read more" button to your blogger blog's homepage, and it's also going to have a thumbnail. I have been aware of the high demand from people to this, so thats why i'm creating a post on this topic to teach you how you can add this read more button on your page.

Follow the steps.

Step 1. Login to blogger acccount, goto Dashboard, then select Template, then select Edit HTML

Step 2. A code script box appears. Tap on it, then press on your keyboard "ctl F". Search for, or type
</head>
Then hit enter on your keyboard

Step 3. Copy the codes just below in to your notepad and past it above

<script type='text/javascript'>
posts_no_thumb_sum = 650;
posts_thumb_sum = 500;
img_thumb_height = 200;
img_thumb_width = 200;
</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){
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: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Optional: The figures written in colored can be changed to your liked number. (the 650, 500 and 200 can be changed)

Step 4: Again, search for this piece of code <data:post.body/>

Here at this point, when you search, there normally are several result. To get the right one, follow carefully.
     After entering the code above, keep pressing enter on your keyboard till you find the result that has this line of code above it.

 class='post-body entry-content' expr:id='"post-body-" + data:post.id'itemprop= 'description articleBody'&gt;

NB: what to take note of in the code is the itemprop= 'description articleBody. dont choose the result that doesn't have that line if code above it. (Optional: The 2nd result should normally be the correct one)

Step 5. You will now have to replace the code "<data:post.body/>" with the below scrips

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

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

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

Final step: save your template

You might also like..

• How to Add CSS to Blogger blog
• How to Create a Sitemap for Blogger blogs