Tutorial Corner

Read More digunakan untuk memenggal tulisan menjadi lebih pendek. Banyak sekali tutorial yang membahas cara membuat Read More. Kali ini saya akan membuat tutorial Read More yang otomatis, juga cara menampilkan atau menyembunyikan thumbnailnya.

Berikut cara membuat Read More Otomatis:
1. Masuk ke blogger.com
2. Pilih Rancangan > Edit HTML. STOP! Jangan dulu check 'Expand Template Widget'
3. Cari kode </head>. Untuk mempermudah, kamu bisa menggunakan kombinasi CTRL+F pada komputer. Lalu tambahkan Kode 1 tepat di atas </head>

Kode 1:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 15;
img_thumb_width = 15;</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>

4. Check 'Expand Template Widget'
5. Cari kode <data:post.body/>

secara default kodenya seperti ini:

<div class="entry"> 
<p><data:post.body/></p> 
<div style='clear: both;'/> <!-- clear for photos floats -->
 </div>

6. Ganti <p><data:post.body/></p> dengan Kode 2.

Kode 2:

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

7. Klik SIMPAT TEMPLATE
8. Selesai

Kamu juga bisa mengedit Kode 1 dan Kode 2 di atas sesuai dengan selera. Berikut penjelasannya :

Penjelasan pada Kode 1

summary_noimg = 250; Panjang tulisan yang ditampilkan ketika tidak ada gambar/thumbnail.
summary_img = 250; Panjang tulisan yang ditampilkan ketika ada gambar/thumbnail.
img_thumb_height = 15; Tinggi thumbnail, dalam px.
img_thumb_width = 15; Lebar thumbnail, dalam px.

Mungkin sebagian kamu tidak suka dengan keberadaan thumbnail, maka saya berikan tips agar Read More secara otomatis tidak memunculkan thumbnail. Silahkan ganti setting kodenya menjadi seperti ini.

1. img_thumb_height = 0;
2. img_thumb_width = 0;
3. imgtag ='<span style="float:left; padding:0px 0px 0px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

Sekian dulu tutorial membuat Read More Otomatisnya. Silahkan dicoba dan semoga berhasil.

Oh ya, tak terasa hari ini adalah penghujung tahun 2011. Maka segenap kru Tutorial Corner mengucapkan
Semoga ke di Tahun 2012 ini kamu bisa lebih baik lagi. Amien.

Sudahkah kamu membuat Resolusi di tahun baru? sebagain contoh bisa lihat di sini

Terima kasih.