Cara Membuat Read More di Blog

Cara Membuat Read More Otomatis di Blog -  Terkadang bila kita melihat sebuah blog yang dalam beranda cuma ada satu postingan , kita akan merasa jenuh. Dan untuk menampilkan beberapa posting dalam halaman baranda merupakan salah satu trik untuk memperlihatkan dan membuat pembacalebih merasa nyaman. Untuk itu di butuhkan pemenggal atau pemutus kalimat atau postingan. Dalam dunia Blog, Kata yang paling tepat yang biasa digunakan adalah READ MORE.
Dan berikut ini salah satu contoh dalam membuat READ MORE otomatis.
Pertama, silahkan menuju menu DESIGN -> Edit HTML, centang Expant Template Widget.
Jangan lupa save template/simpan terlebih dahulu..!!

Cari kode</head> kemudian letakan script dibawah ini di atas kode </head>  

Langsung copy paste aja kode dibawah ini:

<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 Biru berfungsi agar halaman statis tidak ikut terpenggal seperti halaman HOME.



Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua 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>

Save template.

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Untuk Bagian yang disorot kuning Left bisa diganti dengan right.
Dan Untuk <data:post.title/> bisa anda hapus jika tidak ingin menampilkan judul 
Selesai dan Lihat hasilnya.

Untuk Tulisan READ MORE bisa anda ganti dengan Button dengan memasukkan URL button yang anda punya.

Contoh : <img src='URL Button Anda'/>

Demikian cara Membuat Read More Otomatis Di Blog. Semoga bermanfaat