Read More With Image Thumbnail

Bagi sobat yang ingin pasang Read More yang dapat menampilkan gambar atau image pertama disetiap posting dengan image thumbnail, ... mungkin ini salah satu solusinya.
Tutorial ini saya dapat dari blog yang saya ikuti, o-om.com dan sudah dicoba, ternyata sukses !

Hebatnya lagi, kita dapat juga pengatur jumlah karakter yang ditampilkan.
Pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua, tampilkan jumlah karakter tanpa image.

Bagaimana bagi yang sudah memasang Read More versi lama ?
Kodenya kembalikan dulu seperti semula, caranya hapus kode yang berwarna merah dibawah ini, sesuaikan dengan masing-masing template yang digunakan !
Hapus kode yang berwarna merah ini :

<div class="post-header-line-1">
<div class="post-body">
<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>.fullpost{display:inline;}</style>
<p><data:post.body></data:post.body></p>
<b:else>
<style>.fullpost{display:none;}</style>
<p><data:post.body></data:post.body></p>
<a href="data:post.url">Readmore</a>
</b:else>
<div style="clear: both;">

Selesai ?
Ikuti langkah-langkah berikut ini :

Pertama :
Seperti biasa, setelah login, langsung ke halaman EDIT HTML.
Cari kode </head> , setelah ketemu copy script dibawah ini, paste di atas kode dan simpan.

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


Kedua,
Masih pada halaman EDIT HTML, beri tanda centang pada "Expand widget template" lalu temukan kode <data:post.body/>

Ganti kode <data:post.body/> dengan semua kode 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>

Nah selesai sudah ...
Silahkan disimpan dan lihat hasilnya !

Keterangan :

• var thumbnail_mode = "float"; letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
• summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
• summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
• img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
• img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
  

Selamat mencoba..
Happy tutorial with Ekspresi !