Rabu, 23 Maret 2011

BUAT READMORE OTOMATIS

Buat Readmore sendiri terkadang tidak akan pernah pas / tidak rata memotongnya, di tambah nih ya cara membuat readmore ini kalau memotong dia ada titik titiknya di ujung potongan, setelah sebelumnya saya kasih tau cara membuat statistik sekarang tutorial Bikin Readmore otomatis, oke langsung  ke tahap pembuatannya...

* Login di blogger
* Tata Letak
* Edit HTML
Kemudian cari kode seperti ini

</head>

copy paste kode ini, dan simpan di atas kode tersebut




<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 200;
img_thumb_width = 200;
</script&gt;


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

* jika sudah simpan dulu template anda

* kemudian centang expand template widget
* cari lagi kode seperti ini  <data:post.body/>
jika sudah ketemu hapus kode tersebut dan ganti sama kode yang ini

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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Readmore</a></span>


</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
 
setelah itu save template anda dan lihat hasilnya
penjelasan yang berwarna biru di atas :
summary_noimg = 500;

<--(artike di potong tanpa menampilkan gambar)
summary_img = 500;
<--(artikel di potong dengan menampilkan gambar)

img_thumb_height = 200;
<--(tinggi gambar)

img_thumb_width = 200;<--(lebar gambar)

semoga bermanfaat...

Tags :  readmblogspot, meore, buat read more, membuat read more, membuat read more blogspot, membuat read more blog, buat read more di mbuat read more di blogspot, membuat read more blogger, buat read more di blog, membuat read more di blog, buat read more di blogger, membuat read more di blogger, membuat read more otomatis, membuat read more pada blogspot, read more pada blogger, auto read more blogger, membuat auto read more