Memasang Read More Otomatis di Blog

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>

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script>

//<![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>

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

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

<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...</a></span>

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

Ditulis Oleh : Unknown ~ Blogger Kalianda

Sobat sedang membaca artikel tentang Memasang Read More Otomatis di Blog. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, dan jangan lupa untuk follow dan meninggalkan komentar sobat.

:: Cara Membuat Permalink disini ::