Memasang Auto Read More pada Blog

Kita tahu bahwa setiap artikel yang kita posting memiliki panjang karakter yang berbeda², ada yang hanya terdiri dari 1 sampai 2 paragraf, ada pula yang sampai 5 paragraf atau bahkan lebih. Masalahnya jika artikelnya terlalu panjang, maka akan memakan banyak space di halaman Home (Beranda).
Bayangkan jika setiap artikel memiliki 10 paragraf dan jumlah posting yang kita tampilkan di halaman utama sebanyak 10 judul, kira² bagaimana ya tampilan blog kita? ^^'
Untuk mengatasi solusi tersebut, kita pasang fungsi read more dalam blog kita, dan yang lebih efektif lagi, kita pasang auto read more, sehingga kita tidak perlu melakukan pemenggalan secara manual seperti read more model terdahulu. Dalam kasus kali ini, saya akan memberikan contoh pembuatan auto read more pada Blogger.

Sign in dulu ke akun blogger sobat, lalu masuk ke menu Dashboard, kemudian pilih Design > Edit HTML, selanjutnya beri tanda centang pada Expand Widget Template.

Sebelum melakukan pengeditan, ada baiknya jika kode blog yang akan diedit di back up dulu, hal ini hanya sebagai antisipasi jika terjadi hal² yang tidak diinginkan ^^' Caranya yaitu klik tulisan Download Full Template, dan simpan kode xml itu baik² (kalau perlu ganti nama file xml-nya agar besok tidak lupa atau bingung, ok?)

Pertama, pada kode editor, cari tulisan </Head> untuk mempermudak pencarian, gunakan fasilitas Find (Ctrl+F), lalu copas kode di bawah ini di atas kode </Head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</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 2px 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>
</b:if>
</b:if>

Kode di atas bisa pula diedit sesuai dengan keinginan kita, berikut ini adalah keterangannya :

var thumbnail_mode = "float";  (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam pixel)
img_thumb_width = 120; (Thumbnail 'lebar dalam pixel)

Kedua, cari kode berikut ini <data:post.body/> lalu hapus kode tersebut dan ganti dengan kode di bawah 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'>read more -
<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>

Simpan template, dan selesai. Good luck...

Catatan :

1. Jika blog sobat pernah menggunakan read more manual (model lama), ganti ke template standar terlebih dahulu.
2. Kode <data:post.body/> nanti ada 2, dan yang diganti adalah kode <data:post.body/> yang bagian atas.
   

Sumber : search google