Cara Membuat Read More/ Baca Selengkapnya Pada Blogger Post

Saya yakin pembaca sudah tidak asing dengan fitur read more yaitu sebuah metode untuk menyembunyikan sebagian isi artikel dari halaman depan blog agar tampilan blog terlihat lebih rapi dan profesional.

Untuk metode read more yang lama, biasanya pemilik blog harus menyelipkan kode pada setiap postingan agar fitur read more bekerja. Kelemahan dari cara ini tentu kurang praktis.

Nah bagi anda yang tidak mau repot, anda bisa menggunakan fitur 'auto read more'. Dengan fitur ini anda tidak perlu lagi menambah kode read more dalam setiap postingan namun sistem akan secara otomatis menghasilkan link read more untuk postingan anda. Dengan cara ini tentu kerja kita akan menjadi lebih ringan.

Nah bagi anda yang ingin menerapkan sistem auto read more pada blog anda langsung saja ikuti langkah-langkah dibawah ini.

Catatan:
Bagi anda yang pernah memasang read more manual harap dihapus terlebih dahulu kodenya sebelum memasang kode auto read more.

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Beri centang pada "Expand Widget Templates"
3. Letakkan kode dibawah ini tepat diatas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidvmMKFRW2yJbzxOVqH59SVm9uvmf-GqkJalDpaImGf-obUp5LLj_YMeNKFnLsiEiSBN32PIbCH0e32DTd4a-feE-gza4uqtxVwSwee-43qgSk7CTyP2FP0oKZkrsTXE8gFyxoK9E2Nw/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>

Keterangan:
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidvmMKFRW2yJbzxOVqH59SVm9uvmf-GqkJalDpaImGf-obUp5LLj_YMeNKFnLsiEiSBN32PIbCH0e32DTd4a-feE-gza4uqtxVwSwee-43qgSk7CTyP2FP0oKZkrsTXE8gFyxoK9E2Nw/s1600/def-thumb.png" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.

4. Kemudian cari <data:post.body/> atau <p><data:post.body/></p>

5. Ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&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 &#187;</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
</b:if>

6. Kalau sudah, simpan template anda.

7. Selesai. Silahkan lihat hasilnya

Seperti biasa anda bisa mengkreasi sendiri link read more misal dengan menambah judul posting didalamnya atau mengganti link read more dengan gambar. Caranya sama dengan read more manual. Selamat mencoba!!

Jika ada yang kurang jelas silahkan bertanya melalui kolom komentar saya akan berusaha membantu anda.