Home / Tutorial Blogspot / Memasang Read More Otomatis di Blog

Memasang Read More Otomatis di Blog

Posted by Unknown Jumat, 02 April 2010 0 komentar

Read more (baca selengkapnya) merupakan fitur untuk untuk memotong suatu artikel di halaman utama agar bersambung dihalaman berikutnya pada blog, sehingga tampilan blog akan tampak lebih simple, rapi dan elegan.

Sebenarnya blogger sendiri sudah menyediakan fiturnya di form entri posting, namun harus dilakukan secara manual sehingga didalam pemotongan artikelnya tidak sama satu sama lainnya apabila kita tidak jeli dalam pemilihan bagian yang akan dipenggal dan ini akan mengurangi kerapihan di halaman blog kita.

Nah oleh karena itu untuk mengatasi hal tersebut kita memerlukan Read more otomatis agar penggalannya dilakukan sendiri oleh sistem sehingga hasil penggalannya akan sama, seperti pada blog mapasanda.co.cc ini

untuk membuat Read More otomatis berikut langkah-langkahnya :

1. masuk ke Menu Dashboard, klik Tata Letak, klik Edit HTML.

2. Centang checkbox Expand Widget Template.

3. Copy paste kode berikut ini sebelum atau di atas kode </Head>

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

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>

4. Cari kode <data:post.body/> dengan menekan tombol Ctrl + F untuk mempermudahnya, lalu ganti dengan kode berikut :

<b:if cond='data:blog.pageType != "item"'>

</b:if>

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

 5. Simpan 

keterangan :

Fitur read more otomatis sudah jadi, untuk penjelasan script bisa dilihat di bawah ini :
summary_noimg = 250; menentukan jumlah karakter sebelum dipotong apabila postingan tanpa gambar.
summary_img = 250; menentukan jumlah karakter sebelum dipotong apabila postingan dengan gambar.
img_thumb_height = 120; menentukan tinggi gambar(dalam ukuran pixel)
img_thumb_width = 120; menentukan lebar gambar(dalam ukuran pixel)

Tulisan Read more... (yang berwarna merah) bisa anda ganti dengan tulisan apa saja seperti "baca selanjutnya"," selengkapnya...",dll.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Memasang Read More Otomatis di Blog
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://rosorasa.blogspot.com/2010/04/memasang-read-more-otomatis-di-blog_2.html. Terima kasih sudah singgah membaca artikel ini.