Cara Membuat Read More Otomatis Di Blogspot

Cara membuat Read More otomatis di blogspot ini mungkin sudah banyak, tapi tidak ada salahnya saya tulis disini  sebagai catatan.

If you post an articel to your blog it will displayed on a main page, if you have a long post content, your blog will opened more long time. But it can be tricked with a script to short your post or only abstraction post will dispaled on a main page, and the full post will replaced by "Read More" link. Here's the trick to create "Readmore"

• Login ke blogger, kemudian pilih Layouts --> Edit HTML
• Click  "Expand Widgets Template" checkbox.
• Temukan  kode </head> atau tekan Ctrl + F untuk lebih cepat
• Jika sudah ketemu copy script dibawah ini, kemudian paste atau letakkan diatas kode  </ head>

Script

<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 = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</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>

Kode warna orange berfungsi agar halaman statis tidak ikut terpenggal seperti halaman HOME.

• Kemudian cari lagi kode <data:post.body/>
• Kalau sudah ketemu, ganti kode  <data:post.body/> dengan semua kode dibawah ini

Kode

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

• Kalau sudah silahkan Preview dan Save Template

Lihat Hasilnya... somoga berhasil.