Cara Membuat Read More

Cara Membuat Read More

[Click to see how many people are online] Alexa Certified Site Stats for www.gotbloggers.co.cc
Cara Membuat Read More Di Blogspot


Pernahkah anda melihat blog yang memanjang ke bawah tanpa penggalan readmore?, biasanya blog - blog tersebut masih baru dan tidak mengerti cara membuat read more di blogspot. Oleh karena itu saya akan membantu anda yang mungkin masih baru di dunia blog. Untuk tahu cara membuat read more, pertama - tama, anda harus mengetahui apa itu script readmore.

Script readmore adalah script yang membantu anda untuk memotong atau memenggal suatu post sehingga artikel anda tidak memanjang ke bawah pada halaman home. Biasanya pemotongan tersebut disertai dengan tulisan baca selanjutnya... atau readmore... dan terkadang disertai juga suatu gambar.
Terdapat 3 jenis readmore pada blogspot yaitu :

Readmore Jump break
Jump break adalah fasilitas readmore yang langsung diberikan oleh pihak google untuk memotong postingan agar tidak tampil memanjang pada halaman home. Cara membuat read more versi jump break adalah cukup dengan mengklik pada kalimat atau paragraph berapa yang ingin kamu penggal lalu klik insert jump break pada. Lalu klik terbitkan entri.

Readmore Manual
Readmore manual adalah versi lama dari automatic read more yang fungsinya sama dengan jump break, akan tetapi jenis ini sangatlah tidak praktis dan memakan waktu banyak karena kita harus memasukkan kode seperti ini :
(Artikel yang ingin di tampilkan di home)

...

(sebagian artikel yang tidak ingin di tampilkan )



Automatic Read More
Automatic Readmore adalah jenis lanjutan dari readmore manual, akan tetapi dalam script ini kita tidak perlu lagi memasukkan kode - kode manual setiap kali membuat post. Semuanya berjalan secara otomatis.

Cara memasang automatic readmore ke dalam blog adalah :

Langkah Pertama
Silahkan masuk ke dalam edit html yang terletak di dalam tata letak.

Langkah Kedua
Beri tanda centang pada expand widget template, lalu klik download template lengkap. Download template lengkap berguna untuk menyimpan template anda. Jika ingin membuka file tersebut silahkan klik kanan pada file download lalu pilih open with - notepad.

Langkah Ketiga
Cari kode dengan menggunakan Ctrl+F. Ketikkan Kode tersebut dalam kotak find.

Langkah Keempat
Copy code di bawah ini , lalu paste tepat di atas kode .



var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;




//
/******************************************
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
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 = '[Photo]';
summ = summary_img;
}

var summary = imgtag + '' + removeHtmlTag(div.innerHTML,summ) + '';
div.innerHTML = summary;
}
//]]>


Langkah Kelima
Cari kode dengan menggunakan langkah yang sama seperti cara ketiga.

Langkah Keenam
Ganti code dengan code yang di bawah ini :



createSummaryAndThumb("summary");
READ MORE -



Keterangan
var thumbnail_mode = "float" ; adalah letak gambar. Float menunjukkan gambar akan berada di sebelah kiri, jika anda tidak mau diganti disebelah kanan silahkan ganti dengan float:right.
summary_noimg = 250; adalah banyaknya karakter yang akan muncul pada home tanpa disertai gambar. summary_img = 250; adalah banyaknnya karakter yang akan muncul pada home disertai dengan gambar.
img_thumb_height = 120; Tinggi gambar yang akan muncul pada halaman home.
img_thumb_width = 120; Panjang gambar yang akan muncul pada halaman home.
Pada tulisan yang saya beri warna ungu adalah letak tulisan readmore tersebut berada. Float:left menunjukkan tulisan readmore akan berada di sebelah kiri, jika ingin mengganti ke sebelah kanan silahkan ganti float:left, dengan float:right.