Ternyata, membuat read more dengan cara manual tidak bisa dilakukan oleh semua orang. Mungkin ini dikarenakan oleh kerumitannya. Memang, saya akui cara tersebut akan membuat kepala pusing tujuh keliling bagi yang masih pemula. Saya aj dulu seperti itu. Tapi, untungnya saya sekarang dah bisa. Nah, bagaimana yang belum bisa? Apa kita paksakan bisa. Sedangkan yang di hadapinya mungkin sangat sulit. Maka dari itu, terbitlah postingan ini “ Cara membuat read more otomatis “ . Semoga dengan adanya tutorial membuat read more otomatis yang ini, siapa aja bisa buat read more dengan gampang.


Tapi, sebelumnya pastikan kalau sobat modif belum memasang read more apapun di blog sobat modif.

Tutorialnya bisa dilihat di bawah:

1. Pergilah ke halaman Edit HTML >> centang expand template widget
2. Cari kode berikut:   </head>
3. Setelah dapat, pastekan kode di bawah ini di atas kode </head> tadi

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

Note : Pada kode di atas, kita dapat melakukan sedikit modifikasi. Berikut panduannya:


var thumbnail_mode = "float";
(float –> gambar thumbnail diletakkan di sebelah kiri. Bisa diganti dengan  no-float )

summary_noimg = 250;
(250 –> jumlah karakter yang ditampilkan jika postingan tidak memiliki gambar / thumbnail)

summary_img = 250;
(250 –> jumlah karakter yang ditampil jika postingan ada gambarnya / thumbnail)

img_thumb_height = 120;
(120 –> tinggi gambar/thumbnail dalam piksel)

img_thumb_width = 120;
(120 –> lebar gambar/thumbnail dalam piksel)




4. Setelah mempastekan kode di atas, sekarang kita mencari kode berikut:

<data:post.body/>  

5. Hapus kode di atas, lalu ganti dengan kode berikut:

<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:right'>
<a expr:href='data:post.url'>Read More... monggo diklik </a>
</span> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Note: Pada kode di atas kita dapat melakukan sedikit modifikasi:

# Pertama:
Right warna merah di atas adalah kode yang akan membuat tulisan read morenya berada di posisi kanan. Bisa diganti dengan left untuk membuatnya berada di posisi kiri.

# Kedua:
Tulisan  Read More... monggo diklik merupakan tulisan yang berfungsi sebagai tulisan read more-nya. Jika tulisan itu diklik, maka semua postingan akan tampil penuh. Dapat diganti dengan kata yang sobat modif sukai, misalnya: selengkapnya , klik untuk membaca seutuhnya, d.l.l.

Setelah selesai semuanya, jangan lupa klik save template. Yang perlu diingat dari cara membuat read more kali ini adalah kesabaran. Harus sabar !!! OK.. Semoga berhasil. O y, kalau berhasil kabari ya. Tapi, kalau enggak, laporkan segera pada saya. Atau kirimkan template sobat modif pada saya melalui e-mail atau sebagainya, lalu beritahukan melalui komentar di bawah. Biar saya buat read morenya. OK ….