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 = "float" ;
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 == "item"'><data:post.body/></b:if>
7. Save Template.
Selesai, sekarang lihat perubahan tampilan blog kamu.
Semoga bermanfaat
0 Komentar