Membuat Read More/Continue Reading thumbnail di Blogspot

Ini adalah tips Blogger yang cukup lama populer,banyak yang sering bertanya pada saya mengenai cara membuat Read Moreatau Continue Reading di blogspot.Dari pada terus menjawab pertanyaan sob blogger satu persatu,bukankah ide yang cemerlang untuk membuat posting tentang ini.

Sob dapat memilih dan menentukan jumlah kata sebagai sebagai ringkasan sebelum link Read More dan seperti biasanya hasilnya adalah apa yang ada di halaman depan bukan lagi seluruh isi posting,tapi hanya sebatas judul,ringkasan dan link Read More atau continue reading.

Langkah-langkah membuat Read More/Continue Reading thumbnail di Blogspot:

1. Klik Rancangan>>Edit HTML

Sebelum menambahkan kode-kode ke template,copy dan simpan seluruh isi template di komputer menggunakan notepad.

Cari kode </head> kemudian letakan kode dibawah ini di atas kode </head> lalu simpan.

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<script type=’text/javascript’>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(“>”)!=-1){d[c]=d[c].substring(d[c].indexOf(“>”)+1,d[c].length)}}b=d.join(“”)}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=” “&&b.indexOf(” “,a)!=-1){a++}b=b.substring(0,a-1);return b+”…”}function createSummaryAndThumb(d){var f=document.getElementById(d);var a=”";var b=f.getElementsByTagName(“img”);var e=summary_noimg;if(b.length>=1){a=’<span style=”float:left; padding:0px 10px 2px 0px;”><img src=”‘+b[0].src+’” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;e=summary_img}var c=a+”<div>”+removeHtmlTag(f.innerHTML,e)+”</div>”;f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>

Sob dapat menentukan sediri:

summary_noimg = 430;  adalah tinggi potongan artikel tanpa gambar

summary_img = 340;  adalah tinggi potongan artikel dengan gambar

img_thumb_height = 100;  adalah ukuran tinggi thumbnail

img_thumb_width = 120;  adalah ukuran lebar thumbnail

2. Masih pada halaman Edit HTML>> Centang Expand Template Widget ,lalu temukan kode seperti dibawah:

<data:post.body/> ganti kode <data:post.body/> dengan kode berikut:

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

Silahkan ganti Read More… menjadi Continue Reading… atau yang lainnya sesuai selera.