Otomatis Readmore

Otomatis Readmore

Posted by rike on 0

Kamu pernahkan mendengar bahkan mungkin telah mengendarai sepeda motor otomatis, seperti mio, vario, atau spin. Jalannya tanpa memasukkan perseneling, langsung ngacir. Ternyata bukan hanya mesin yang bisa otomatis, readmore ada yang otomatis loh! Kalau tidak salah dulu pernah kita membicarakan tentang readmore dengan loading halaman, readmore tanpa loading halaman, dan readmore diikuti dengan judul posting. Sekarang ada trik blogger readmore baru yang otomatis, dimana trik ini OB dapat setelah jalan-jalan ke blog o-om.com tentang cara pasang auto readmore. Singkatnya cara kerja otomatis readmore ini sama seperti readmore dengan loading halaman, tetapi tanpa memasukkan kode dalam kalimat yang akan kamu penggal. Ya... iyalah, namanya saja otomatis. Dan kabarnya lagi, kamu dapat menentukan berapa jumlah karakter yang akan ditampilkan dalam postingan, baik dengan image maupun tanpa image.

Penting :

Sebelum beranjak lebih jauh, pastikan residu-residu readmore yang telah tertanam sebelumnya sudah dibersihkan. Atau diistilahkan dengan mengembalikan kode template seperti semula. Caranya dengan mereview ulang posting readmore yang pernah kamu pasang dalam blog kamu.

Berikut trik blogger membuat otomatis readmore dalam postingan :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari Kode kode </head> dan Copy-Paste (copas) kode berikut di atasnya.

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 450;

summary_img = 450;

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>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :

1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".


2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).


3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).


4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.


5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.

• Cari kembali kode seperti di bawah ini.

<data:post.body/>

atau

<p><data:post.body/></p>

• Kalau sudah ketemu, ganti kode tersebut dengan kode berikut.

<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'>Readmore �� <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :

1. Ganti kode yang berwarna merah dengan letak readmore yang kamu inginkan left (kiri) atau right (kanan).


2. Kalau perlu ganti Readmore dengan kata favorit kamu.


3. Hapus kode <data:post.title/>, jika kamu tidak menginginkan readmore diikuti dengan judul posting.

• Jangan lupa disimpan.

Selamat membuat otomatis readmore...