Cara Membuat Read More Otomatis Plus Thumbnail, Gambar

Alif Ilmu - Bagaimana ya cara membuat read more otomatis di blog? Nah...mungkin saja ada pertanyaan seperti itu yang muncul dalam renungan sobat blogger sekali. Dengan menggunakan read more pada blog kita, memungkinkan artikel yang di tampilkan pada halaman utama blog kita akan terpotong alias lebih pendek, sehingga menghemat halam juga.

Lalu, bagi yang sebelumnya sudah pernah mencoba membuat read more ini dengan cara yang manual, kali ini kita akan membuatnya dengan cara otomatis.

O..ya, bagi rekan blogger semua yang sebelumnya telah membuat read more manual, silahkan edit terlebih dahulu kode pada templatenya ke dalam kode yang semula.
Silahkan perhatikan kode di bawah ini yang merupakan contoh pembuatan readmore yang manual :

<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;'/>

Silahkan hapus kode yang saya tandai dengan huruf cetak tebal.
Namun kemungkinan, kode pada setiap blog akan berbeda, jadi sesuaikan saja.....he..he..he...


Setelah selesai melakukan langkah-langkah diatas, lalu kita lanjutkan ke langkah berikut ini.
Silahkan masuk terlebih dahulu ke menu edit html kemudian centang pada expand widget template, oya...jangan lupa backup dulu templatenya. Agar mudah dikembalikan seperti semula jika terjadi kesalahan, yaitu dengan cara klik download template lengkap.

Setelah itu, silhakan letakan script di bawah ini tepat di atas kode </head>,setelah itu jangan lupa untuk menyimpannya.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 100;
img_thumb_width = 100;
</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>

Nah, belum selesai, selanjutnya silahkan cari kode seperti ini <data:post.body/>, nah kalau udah ketemu, ganti kode <data:post.body/> dengan 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>


Selesailah sudah, selamat mencoba dan silahkan lihat hasilnya.

Catatan:

* img_thumb_height = 100;, merupakan tinggi thumbnail dalam piksel.
* img_thumb_width = 100;, merupakan lebar thumbnail dalam piksel.
* summary_noimg = 200;, yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting yang tanpa thumbnail atau gambar.
* summary_img = 200; , yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting dengan thumbnail atau gambar.
* Pada bagian Read More, silahkan anda ubah sesuai keinginan, misalnya; selanjutnya, dll.