For the latest version of the Auto Read More this time seemed more sophisticated, because the function of beheading sentence should work automatically without having to add the code again in the 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.
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)
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....
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....
I just let......................:)
<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;'/>
<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;'/>
OK, if already living continue with the tutorial below.
First, please go directly to the page EDIT HTML, Find the code </ head> then put this script in the above code </ head> If so, do not forget at the store first.
First, please go directly to the page EDIT HTML, Find the code </ head> then put this script in the above code </ head> If so, do not forget at the store first.
Directly copy paste the code below:
<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>
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>
Still on page EDIT HTML, Tick the "Expand widget templates" and then find the code like below :
<data:post.body/>
If so, replace the code <data:post.body/> with all 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 == "item"'><data:post.body/></b:if>
<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>
Finish ,,, :) happy blogging friend.
Description:
var thumbnail_mode = "float", (we can decide whether the location of the thumbnails are in (float) left, or if not, please replace the (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 on the posts with image / thumbnail)img_thumb_height = 120; (Thumbnail height in pixels)img_thumb_width = 120; (Thumbnail width in pixels)
var thumbnail_mode = "float", (we can decide whether the location of the thumbnails are in (float) left, or if not, please replace the (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 on the posts with image / thumbnail)img_thumb_height = 120; (Thumbnail height in pixels)img_thumb_width = 120; (Thumbnail width in pixels)
2 comments:
Thanks For this Tips, its fery dificult, Thanks.
@Mobil Keluarga Ideal Terbaik Indonesia hehehe,,,,,ia gan...tapi gampang kok.... :)
Post a Comment