memasang auto read more

Apasih Readmore itu?

Para blogger senior pasti sudah mengetahui apa itu readmore dan tujuan dibuatnya readmore.

Sebelum membahas cara membuat readmore saya sedikit mengulasnya yang mungkin bagi para blogger awam masih asing.

Readmore atau baca Selengkapnya Dlsb. ialah sebuah cara yang dapat digunakan untuk menampilkan sebagian artikel kita pada tampilan awal dari situs ataupun blog kita sehingga tampilannya terkesan rapi.dan ketika pengunjung mengklik tulisan ataupun gambar readmore tersebut maka secara otomatis membuka seluruh isi artikel yang dimaksud.

cara membuat readmore memang banyak sekali. tetapi kali ini saya menyampaikan cara membuat readmore yang otomatis alias kita tidak perlu memasang readmore ketika kita hendak menulis artikel. karena ada cara membuat readmore yang lumayan rumit dan lama seperti selalu menerapkannya setiap kita hendak menulis artikel.

Berikut ini cara membuat Auto Readmore atau Baca Selengkapnya.

Setelah anda masuk ke blogger atau draft blogger dengan akun anda, masuklah ke menu Rancangan lalu pilih Edit Html

Kalo sudah, silahkan anda memberi centang pada kotak Expand Template widget.

Kemudian....

Carilah kode </head> pada kolom yang berisi script-script.

Untuk memudahkan pencarian tekan saja tombol Ctrl dengan huruf "F" secara bersamaan pada keyboard komputer anda ( tekan Ctrl+F ) Sampai muncul kolom pencarian. Lalu masukkan kode yang dicari kedalam kotak tersebut.

Kalau sudah ketemu kodenya,  taruh diatas kode </head>

Script dibawah ini ( dicopy paste aja )

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

Setelah itu, silahkan cari kode <data:post.body/> ( gunakan cara seperti diatas )

Sudah ketemu??? 

Silahkan ganti kode <data:post.body/> dengan kode berikut ( Copy paste lagi nih )

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

Kalo sudah berarti pekerjaan telah selesai.

Tinggal klik simpan ( Save ) lalu lihat deh hasilnya.

Keterangan kode :

var thumbnail_mode = "float"; untuk mengatur letak thubnail disebelah mana "float" = sebelah kiri atau gunakan "no-float" jika tidak ingin berada disebelah kiri.

summary_noimg = 250; adalah jumlah banyaknya karakter yang ditampilkan tanpa gambar/thumbnail.

summary_img = 250; adalah jumlah karakter yang ditampilkan dengan gambar / thumbnail.

img_thumb_height = 120; Tinggi Thumbnaildalam piksel
img_thumb_width = 120;   Lebar Thumbnail dalam piksel