Membuat Read More/Continue Reading thumbnail di Blogspot

Published 2 Mei 2012 by loewongankerja
membuat readmoreIni 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.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: