Saturday, April 23, 2011

Script Readmore Otomatis

Kenapa saya posting Script ini? karena ini permintaan teman saya, biasalah sob, sesama newbie harus saling membantu, sebelumnya tau readmore kan? contoh lihat gambar readmore punya saya


Readmore atau yang sering di sebut Baca Selengkapnya yang sering kita lihat di setiap Blog memang sangat membantu untuk men-split artikel yang terlalu panjang. Namun ada sedikit kendala yaitu saat melakukan cut atau pemotongan artikel dengan menyisipkan <span class="fullpost"> dan </span> pada bagian akhir artikel. Sobat yang membutuhkan Read More Otomatis untuk blog yang bersifat portal dan selalu up-todate bisa menggunakan script auto read more di bawah ini, terdapat 2 script, ini dia sob tutor dan scriptnya :
  1. Sobat masuk ke edit html, Cari kode </head> kemudian letakkan Script No. 1, di atas kode </head> lalu simpan
  2. Sekarang sobat centang checkbox "Expand Widget Template" lalu cari kode <data:post.body/> , jika sudah ketemu, sobat ganti <data:post.body/> dengan Script No. 2, lalu simpan dan lihat hasilnya.
Script No. 1
<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[
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>

Script No. 2
<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>
NB : Tulisan READ MORE - Bisa sobat ganti sesuai keinginan sobat Ket : Untuk Sobat yang telah membuat read More dengan Metode Manual harus dibersihkan dulu seperti default, hapus pada bagian warna merah, seperti contoh di bawah ini :
<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;'/>

1 Comments:

  1. Brknjng tmpt shbt.! sekalian dtg utk bagi2 kbr gembira. Award utk shbt silahkan dijmpt..!

    ReplyDelete