Cara Mudah Membuat Read More Otomatis pada Blog

Cara Membuat Read More Otomatis pada Blog – Kegunaan Read more otomatis adalah untuk membuat tampilan home page menjadi ringkas. Hal ini juga bertujuan untuk memudahkan memasang Iklan di bawah postingan. Jika blog anda masih belum menggunakan Readmore otomatis, coba lah cara ini untuk membuat tampilan blog anda lebih simple dan dinamis.

Read more versi yang satu ini meruapakan yang paling cepat, sehingga anda tidak perlu mengkawatirkan masalah berat loading blog. Seperti yang anda lihat gambar diatas, itu adalah contoh Read More yang saya pasang di blog download saya. Potongan pada kolom artikel menjadikan lebih menarik, ditambah lagi label juga terpasang jelas di bawah. Oh ya, Background Read More ini mengikuti tampilan blog, jadi jangan anda kira tutorial ini background nya akan sama seperti gambar diatas 🙂

Langsung saja kita simak Cara Membuat readmore Otomatis ;

1. Login ke blogger

2. Masuk ke menu Template (jangan lupa Backup template anda dulu untuk berjaga-jaga bila terjadi kesalahan),

3. klik edit HTML

4. Klik satu kali pada kolom Sript nya Cari kode </head> , gunakan CTRL+F lalu enter untuk memudahkan pencarian

5. Masukan kode berikut diatas </head>

<script type=’text/javascript’> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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”);
var summ = summary_noimg;
if(img.length>=1) {
imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”><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>

Tips :
-Tidak usah di sertting sudah bagus
-Warna Biru untuk mengatur ketinggian read more otomatis di Halaman Depan.
-Warna Hijau adalah  Lebar dan tinggi gambar
-Warna Ungu adalah Pengaturan banyaknya deskripsi artikel, tanpa gambar dan dengan gambar.
.post-outer harus di perhatikan, supaya tidak terpencar


6. Selanjutnya Cari kode <data:post.body/>

7. Hapus kode <data:post.body/> yang ke 2 atau ke 3 (coba satu persatu), dan ganti <data:post.body/> 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:right;padding-top:20px;’>
<a expr:href=’data:post.url’> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/>
</b:if>

#Untuk baca selengkapnya bisa diganti “ReadMore”

8. Preview terlebih dahulu, jika sudah bagus silahkan di save.

Itulah tutorial cara membuat read more otomatis, semoga bisa membantu mempercantk tampilan blog anda. Jika masih kurang jelas atau tidak berhasil, silahkan bertanya.