Membuat Read More Otomatis, Mudah, dan Ringan

Oleh Unknown

Monday, March 30, 2015

Apa itu Read More?

Read More atau dalam bahasa Indonesianya berarti "Baca Selengkapnya" adalah cara untuk meringkas dan memangkas suatu posting di halaman beranda.

Tentu konco sinahu ingin kan kalau blog yang dimiliki itu tampil lebih menarik dan mudah diakses. Salah satu langkahnya adalah dengan cara menerapkan read more ini. Dengan memangkas tiap bagian posting di halaman beranda, maka wajah blog kita akan tampak lebih rapi dan simpel.

Kebayang gak kalau misalnya blog kita memuat artikel yang cukup banyak, sementara tidak kita pangkas dengan read more? Tentunya akan berakibat pada kecepatan loading blog kita. Karena semua konten -baik tulisan, gambar, ataupun video- akan bercampur baur termuat menjadi satu di halaman beranda.

Cara read more ini juga akan merangsang curiousity atau rasa penasaran pembaca blog ketika mereka membaca penggalan-penggalan posting yang kita pangkas dengan read more tadi. Apalagi kalau kita pandai dalam pemilihan judul. Sehingga untuk mendapatkan informasi yang utuh mereka akan melanjutkan dengan mengklik read more.

Cara Membuat Read More Otomatis, Mudah, dan Ringan

Nah, sekarang bagaimana caranya?. Ada beberapa versi tentang cara membuat read more. Sesuai judul di atas, Sinahu Coding akan berbagi tentang cara membuat read more yang otomatis, mudah, dan ringan. Otomatis artinya semua artikel yang kita posting nanti akan secara otomatis terpenggal sama rata dan sama banyak. Mudah karena cukup mengcopas script kode di bawah ini. Dan ringan dalam arti tidak neko-neko. Karena memang ada read more yang dikombinasikan dengan gambar animasi, efek khusus, dan sebagainya sehingga agak berat ketika halaman dimuat.

Oke, langsung saja. Langkah-langkahnya adalah sebagai berikut :

1. Login blogger
2. Pengaturan template -> klik edit html
3. Cari kode </head> dan letakkan kode dibawah ini diatas kode </head>. Kode angka bisa kamu ganti sesuai selera.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>

//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Keterangan :

summary_noimg =  banyaknya huruf jika tidak ada gambar
summary_img = banyaknya huruf jika ada gambar
img_thumb_height = Ukuran tinggi gambar
img_thumb_width = Ukuran lebar gambar


5. Selanjutnya cari kode <data:post.body/> kemudian ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Read More</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

6. Tulisan Read More bisa kamu ganti dengan kata yang kamu sukai.
7. Simpan template

Demikian tutorial blog tentang Cara Membuat Read More Otomatis, Mudah, dan Ringan yang bisa Saya bagikan buat konco sinahu. Kalau ada pertanyaan bisa kita diskusikan di kolom komentar.

---