Cara Membuat Readmore Otomatis ( Dengan Text atau Gambar )

Biar gak pusing, langsung saja sikat tutorial berikut :

Pertama Cara Membuat Readmore Otomatis ( Dengan Text atau Gambar ), login dulu ke blogger terus masuk ke menu rancangan dan pilih Edit HTML jangan lupa untuk mencentang expand template widget. Biar aman, backup dulu template blog sobat. Abis itu cari kode </head> kemudian copy script dibawah ini dan paste sebelum kode </head>.

<script type='text/javascript'>

var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 550;

summary_img = 551;

img_thumb_height = 150 ;

img_thumb_width = 150;

</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");
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><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>

Nah, kalau sudah, masih pada halaman Edit HTML cari lagi kode <data:post.body/> atau <p><data:post.body/></p>, biasanya setiap template berbeda, jika pada template sobat sudah ada script-script lain misalnya tombol like atau lainnya sesuaikan saja. Kalau sudah ketemu hapus dan ganti kode ini dengan kode di bawah ini :

Menggunakan Tex.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>Read more &#187;</b></a></span>
</b:if>
</b:if>

Menggunakan Gambar.
Ganti kode ini <a expr:href='data:post.url'><b>Read more &#187;</b> dengan yang dibawah ini :

<a expr:href='data:post.url' title='Read More'><img src='link-gambar-sobat'/>

Setelah itu simpan template sobat dan lihat hasilnya pada halaman depan blog sobat, apakah sudah berubah atau belum.

Note :

[*] var thumbnail_mode : "no-float" ; (ini adalah untuk mengubah posisi gambar apakah di(float) kiri atau jika tidak silahkan ganti dengan (no-float)

[*] summary_noimg = 550; (Banyaknya huruf yang akan ditampilkan di posting tanpa gambar / thumbnail)

[*] summary_img = 551; (Banyaknya huruf yang akan ditampilkan di posting dengan gambar / thumbnail)

[*] img_thumb_height = 150; (Thumbnail 'tinggi gambar dalam piksel)

[*] img_thumb_width = 150; (Thumbnail 'lebar gambar dalam piksel)

[*] link-gambar-sobat  (Disini Tempat untuk mengganti gambar nya, dengan gambar milik sobat).

Selamat Mencoba ya, Jangan lupa Follow Blog Saya (^_^)

>