Cara membuat read more otomatis pada blog / situs

Cara mudah membuat read more otomatis di blog, banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang membahas bagaimana cara membuat readmore otomatis. Nah kali ini saya juga akan menjelaskan cara membuat readmore otomatis secara detail sehingga kawan blogger semua dapat mencobanya.

Ngomong-ngomong mungkin ada yang bertanya apa itu readmore? Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “Read More”, “Baca Selengkapnya”, ”Lanjutkan Membaca ”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Berikut cara membuat read more otomatis di blog :

• Silahkan buka blog anda dan pada dropdown menu pilih Template => Edit HTML

• Cari Kode </head> dengan menggunakan tombol kombinasi Ctrl + F untuk mempermudah pencarian

• Copy paste kode dibawah ini tepat 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 type='text/javascript'>
//<![CDATA[
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>

• Save Template anda.

• Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "Blog post / postingan blog" jika anda menggunakan bahasa indonesia.

• Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.

• Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

• Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".

• Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.

• Selanjutnya akan terbuka kode kode yang lain.

• Geser atau scrol ke bawah dan cari kode

 <data:post.body/>

• Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah 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>

• Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

Sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.

Reference : Trik Seo Simple

Artikel Terkait : Blogging Tutorial