Membuat Read More With Image Thumbnail 'Otomatis'

Fungsi Read More otomatis kali ini untuk meng-cut (memenggal) tulisan sesuai dengan keinginan kita. Tidak hanya itu, pada tutorial ini fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Intinya, read more kali ini bis dikatakan denagn read more with imaget humbnail. Hebatnya lagi, kita dapat juga pengatur jumlah karakter yang ditampilkan. Sebelum anda melakukan hal ini sebaiknya anda melihat hasi dari read more yang akan di berikan kali ini. Lihat Demo...!!!!

ini bertujuan untuk mengontrol anda supaya tidak menyesal memasang read more seperti ini. dan jika sudah yakin langsung aja ikuti langkah berikut:

• Login ke akun Blogger anda;


• Pilih Rancangan;


• Pilih Edit HTML;


• Cari kode </head> jika seuda ketemu copy-paste kode dibawah ini persis diatas 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[
/******************************************
Membuat Read More With Image Thumbnail 'Otomatis'
(C)2011 by Kang Onk Design
http://kang-onk.blogspot.com/2011/07/membuat-read-more-with-image-thumbnail.html
********************************************/
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>

• Klik Save / Simpan.

* Akan tetapi masih belum selesai, selanjutnya tetap pada halaman Edit HTML, Beri tanda centang pada Expand widget template lalu temukan kode <data:post.body/>
* Jika sudah ketemu kode tersebut, ganti 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>

* Silak simpan dan lihat hasilnya, pasti muantap oiy...!!!!

Keterangan :

• var thumbnail_mode = "float" (kita dapat memutuskan apakah 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)

Semga bermanfaat....!!!!!