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)


<blink>...</blink><span class="fullpost">
(sebagian artikel yang tidak ingin di tampilkan )
</span>

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 semua code di bawah ini , lalu paste tepat di atas kode . Jika error coba copy code tepat di bawah ini

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

Langkah Kelima

Cari kode dengan menggunakan langkah yang sama seperti cara ketiga.

Langkah Keenam

Ganti code dengan code yang di bawah ini :

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

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.