Membuat Auto Readmore Ringan Untuk Blog

Unknown

Tutorial

Kamis, 20 Februari 2014

Belum ada komentar

Membuat Auto Readmore Ringan Untuk Blog - Auto Read more berfungsi untuk meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman utama Blog.

Auto Readmore kali ini hanya menggunakan kata - kata sehingga dapat mempercepat loading Blog, untuk menggunakannya silahkan ikuti tutorial dibawah.

Cara Membuat Auto Readmore Ringan Untuk Blog

1. Login ke Blogger
2. Piih Template
3. Pilih Edit HTML
4. Kemudian cari kode </head> (gunakan CTRL + F untuk mempermudah pencarian)
5. Jika sudah ketemu, letakan kode dibawah ini terpat diatas kode </head>

<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

6. Kemudian cari kode <data:post.body/> lalu ganti dengan kode dibawah

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

Tulisan Readmore bisa diganti sesuai keninginan sobat, misalnya Baca Selengkapnya...

7. Terakhir Simpan Template

Note: Jika template sobat sebelumnya sudah memiliki script Auto Readmore, maka terlebih dahulu hapus kodenya, lalu ganti dengan yang diatas.

Semoga bermanfaat...