Cara Mudah Membuat Readmore Pada Blogger PART (2)

Setelah anda sudah bisa membuat readmore (1) tetapi masih ada kejanggalan atau kesulitan atau apa sajalah yang membuat anda merasa bosan atau mungkin sudah merasa kesulitan dengan keadaan itu. Keadaan yang gimana ya? Yang pasti keadaan yang serba susah deh (heheheh, ga' jelas ya..^^) maksudnya kesulitan mungkin di readmore (1) sebelumnya anda harus memanggil fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> untuk melakukan pemenggalan kata, tapi untuk versi kali ini anda sudah tidak menemukan hal tersebut lagi.

Di versi terbaru readmore kali ini anda sudah tidak diharuskan lagi untuk melakukan pemanggilan fungsi seperti diatas, anda sudah tinggal ngetik posting dan jeng jeng jeng... fungsi auto readmore pun bekerja dengan sendirinya plus dengan gambar thumbnail yang secara otomatis muncul pada image pertama yang anda masukkan..hhuhuh enak bukan.

Mau tau caranya, tapi sebelum membuat ini bila yang sudah membuat readmore versi lama diharapkan mengembalikannya seperti semula, caranya dengan menghapus kode berwarna merah berikut ini, atau kalau tidak bisa ya donlot aja lagi template anda dan sesuaikan lagi deh ke bentuk semula (heheheh cara cadangan itu...)

<div class='post-header-line-1'/>
<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'>Readmore �»�»</a>
</b:if>
<div style='clear: both;'/>

setelah beres langsung aja deh..>>>

LANGKAH PERTAMA
Masuk Ke tata letak > edit html

LANGKAH KEDUA
Centang langsung Expand Template Widget, dan jangan lupa backup template dulu dengan meng klik “download template lengkap”

LANGKAH KETIGA
langsung aja cari dulu kode </head> setelah itu copy paste kode dibawah ini dibawah kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
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>

setelah di copy paste semua langsung aja cari kode <data:post.body/> lalu langsung diganti kodenya dengan yang dibawah ini

<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 == &quot;item&quot;'><data:post.body/></b:if>

kalau sudah pastikan untuk disimpan. Lalu, ya dicoba bisa apa gagal? Kalau gagal, mungkin bisa dicoba lagi, kalau gagal lagi coba lagi, kalau masih gagal mungkin anda yang kurang beruntung..heheh

Catatan Kecil:
Var thumbnail_mode = “float”; maksudnya letak thumbnail berada di kiri (float) jika tidak ingin ganti aja dengan (no-float)
Summary_noimg = 250; maksudnya banyak karakter yang tampil di posting tanpa gambar / thumbnail
Summary_img = 250; maksudnya banyak karakter yang tampil di posting dengan gambar / thumbnail
img_thumb_height = 120; maksudnya tinggi (px) dari thumbnail img
img_thumb_width = 120; maksudnya lebar (px) dari thumbnail img