How to create Auto Read More with thumbnail on Blogger

How to create Auto Read More with thumbnail on Blogger

How to create Auto Read More with thumbnail on Blogger

This time I will write about the Read More function will be run automatically or called Auto Read More. This article I got from the Master Blogger.

In previous versions we had to cut the paper with the manual way to perform the callback function <div class="fullpost"> .. </div> or <span class="fullpost"> .. </span> where the code is usually buried in our manually into the posting page.

To Auto Read More version, you do not have to do it because the sentence truncation function should work automatically without having to add the code above.

Auto Read More function is capable of displaying the first image in the post and display the image at the beginning or the beginning of the paragraph referred to the thumbnail image.

Not only that, we can also control the number of characters displayed. Here are two options for the number of characters. The first, the number of characters that is displayed if there are images that are included in the post and the second number of characters with no image.

Here are the steps to make auto read more.

1. Login to your Blogger account. Go to the Edit HTML page.
2. Copy and paste the following code above the code </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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 = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

3. Still on the Edit HTML pages, Check the "Expand widget templates" and then find the code like below

<data:post.body/>

4. Replace code above with the code below

<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/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Save template and see the results

thumbnail_mode var = "float"; (we can decide whether the location of the thumbnail in the (float) left, or if not please change it with (no-float)
summary_noimg = 250; (Define how many characters will be displayed in the post without a picture / thumbnail)
summary_img = 250; (Define how many characters will be displayed in the post with a picture / thumbnail)
img_thumb_height = 120; (Thumbnails' height in pixels)
img_thumb_width = 120; (Thumbnails' width in pixels)

Good luck..!