Cara Membuat Read More Otomatis Pada Blogger

Cara Membuat Read More Otomatis Pada Blogger-Kali ini Cara Design Blogger akan memberikan tutorial blogger cara membuat read more otomatis pada blogger. Sebenarnya apa fungsi read more otomatis itu? Mengapa para blogger menerapkan read more otomatis pada blog mereka?
Coba perhatikan screen shoot dari blog Cara Design Blog ini yang menggunakan read more otomatis.

Fungsi dari read more adalah untuk memenggal artikel blog di halaman Beranda atau Home. Dengan menerpkan read more otomatis setiap postingan artikel blog hanya ditampilkan Judul dan satu paragraf saja. Penggunaan read more otomatis ini juga membuat tampilan blog  menjadi lebih cantik dan mempercepat loading blog. Jika pengunjung ingin membaca postingan blog secara keseluruhan tinggal klik read more. 
Read more sendiri artinya Baca selengkapnya. Untuk menampilkan semua artikel rekan blogger yang lain ada yang memakai More about, More atau memakai Bahasa Indonesia; Baca Selengkapnya atau Selengkapnya.

Terus bagaimana cara  membuat read more otomatis? 
Baiklah, mari kita simak bersama tutorial blogger cara membuat read more otomatis berikut ini:

1. Masuk ke Dasbor Blog kamu.
2. Klik Template >> Edit HTML >> Lanjutkan >> Centang Exspand Template Widget
3. Cari </head>
Cara mudah mencari: Tekan CTR+F, Find:</head>

4. Masukan kode berikut letakan Tepat di atas kode </head>

<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

Keterangan kode:

• summary_noimg = 300 adalah jumlah karakter yang ditampilkan
• summary_img = 250 adalah Image yang ditampilkan (jika artikel ada gambarnya)
• img_thumb_height = 60 adalah tinggi image ditampilkan
• img_thumb_width = 90 adalah lebar image ditampilkan
• Angka-angka ini bisa kamu sesuaikan dalam membuat read more otomatis.

5. Cari <data:post.body/>
Jika ditemukan ada dua <data:post.body/> pilih kode yang pertama.

6. Letakan kode berikut ini Tepat di bawah kode no.:5.

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

7. Save Template.
Selesai, sekarang lihat perubahan tampilan blog kamu.
Ternyata mudah ya cara membuat read more otomatis di blogger.