Add Auto Read More with thumbnail In Blogger blog post

PAGE UPDATED LINK..http://webbender.blogspot.com/2014/04/add-auto-read-more-button-with.html

How To make a post with automatic "read more" button and thumbnail

 

Today, i will be teaching you how to add an automatic "read more" button and a thumbnail to your blogs homepage so that it summarizes your post in one page, This way, you wouldn't have to insert manual jump breaks anymore

Now here lets get started...

step1... sign in your blogger account, go to dashboard go to Template then edit Html

step2... tap on the box of script, then press ctl + f on your keyboard, then search for this code 

</head>

step3... copy and paste the below code just above head </head>

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

NOTE: you can change the figures written in coloured 650 and 500 in blue and 200 in red text to your desired number

step4... search for this code <data:post.body/> and press enter key on your keyboard

here is the problems where you make mistakes and you dont get your results good. JUST FOLLOW CAREFULLY.

After you might have searched the code, when you scroll you will see 3 results for the search result (for some of you, it might be 2 and might also be more than 3).

     You have to pick the result that has this line of code above it

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

All you have to note here is the itemprop= 'description articleBody

NOTE: If you find the code "<data:post.body/>" and you dont find the one that has itemprop='description articleBody'>, just search again and keep pressing enter on your keyboard till you find it.

step5... replace the code "<data:post.body/> with the below code

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

Then preview your work and save the Template.

That's all whats done.

You might also like

• How to Copy Files with High Speed on your PC  
• How to Add a Costum/Customized Share button on Blogger blog