Recent feature of "READMORE" with using template code for posting <div class="fullpost">..</div> Or <span class="fullpost">..</span> within this post i will show you how Auto Read More implemented this time the feature of "READMORE" automatically can be use to the previously post.
Then again .. great, Read More functions are capable of representing the first image in the post and made fload image is in the beginning of paragraph beginning, even though the picture we put in the middle or end of the posting.
Possibly, more comfortable I call it with a thumbnail image facility. Not only that, we can also control the number of characters displayed. Here there are 2 options for the number of characters. The first, the number of characters that is displayed if there are images included in posts and secondly the number of characters without an image. Well, let me show you directly into the tutorial just ok.
Important! Which has put Read More old version of the code should first return to as they are, how to remove the red code below (Each template may be different, so stay adjusted only).
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Next
First go to EDIT HTML, find this tag </head> put this code below </head> don't forget to backup your previous template.
<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>
tick "Expand widget template"
find this code below<data:post.body/>
replace <data:post.body/> with this new code
<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 == "item"'><data:post.body/></b:if>
save
Keterangan:
var thumbnail_mode = "float"; (or (no-float)
summary_noimg = 250; (count of character shown if your post with no thumbnail)
summary_img = 250; (count of character shown if post with thumbnail)
img_thumb_height = 120; (Thumbnail 'in piksel)
img_thumb_width = 120; (Thumbnail 'in piksel)
