Cara Memasang Automatic Read More V2

Masih ingat kan pada tampilan Read more yang saya posting tentang Read More v1, pada v2 (versi2) kali ini saya mendapatkan informasi dari blogger lain. Ya memang sih, ada yang sulit saya mengerti, dan gampang juga, namun hasilnya toh error, sehingga saya mempunyai sedikit tips yang membuat hasilnya jadi memuaskan, tentang Cara Memasang Automatic Read More V2, lumayan panjang, tapi hasilnya lebih baik dari pada Read More v1.

Oh ya, Read More V2 ini bisa di setting juga sesuai selera looh, kita bisa memunculkan dan menghilangkan gambar sesuai ukuran yang di tentukan, serta bisa juga menambahkan dan mengurangi isi artikel yang akan muncul pada saat di home/beranda makanya cobain, heee...

Cara nya sebagai berikut :

• Login Blogger
• Klik Rancangan-Edit HTML
• Bagi Blogger yang masih memasang Read More v1, sebaiknya di hapus kode tersebut seperti sebelum mempunyai read more, atau jika Anda tidak tahu bagian mana yang di hapus, bisa melihat kode yang akan di hapus. Jangan lupa centang Expand Template Widget, cari kode seperti di bawah ini, fokus aja dengan kode <div class='post-body'>:

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

• Hapus kode HTML yang berwarna merah
• Selanjutnya, jika sudah di hapus, cari kode </head> , letakkan kode berikut di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

• Kemudian cari kode <data:post.body/> atau <p><data:post.body/></p> , hapus atau ganti kode tersebut menjadi kode seperti di bawah 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:left'><a expr:href='data:post.url'>Selengkapnya &#160;&#187;&#187;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

• Klik tombol Simpan Template
• Selesai dan lihat hasilnya

Note :

Pada kode script yang bercetak tebal di atas dari ;

• var thumbnail_mode = &quot;float&quot; ; (Anda bisa mengatur letak thumbnail/gambar berada di kiri atau (float) , jika tidak, ganti dengan (no-float))
• summary_noimg = 250; (Mengatur jumlah karakter yang di tampilkan di postingan tanpa thumbnail/gambar, ganti angka 250 sesuai selera Anda)
• summary_img = 250; (Mengatur jumlah karakter yang di tampilkan di postingan dengan thumbnail/gambar, ganti angka 250 sesuai selera Anda)
• img_thumb_height = 120; (Mengatur thumbnail/gambar dengan tinggi dalam pixel, ganti angka 120)
• img_thumb_width = 120; (Mengatur thumbnail/gambar dengan lebar dalam pixel, ganti angka 120

Selamat Mencoba dan Semoga Berhasil