Cara Pasang Tombol Read More Otomatis

Kali ini saya akan bahas sedikit mengenai cara pasang read more otomatis pada posting blogger, pada umumnya artikel semacam ini uda kian banyak di internet tapi saya mencoba memostingnya lagi karena dalam read more otomatis ini terdapat beberapa masalah yang sering di bicarakan para blogger. nah kali ini saya memberikan solusinya namun di kemas dalam dua posting. posting yang pertama yah ini dia yang lagi sobat baca.

Mari kita lihat cara memasang read more otomatisnya:

1. Pertama Login ke blog anda

2. Masuk ke menu Perancangan

3. Pilih Edit HTML dan jangan lupa beri tanda centang pada Expand Template Widget

4. Setelah itu cari code </html>

Setelah Ketemu kodenya maka Letakkan kode javascipt dibawah tepat diatas kode tadi

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

5. kemudian cari kode <data:post.body/>

 Kalo sudah ketemu ganti kode tersebut dengan kode di bawah ini

&lt;b:if cond=&#039;data:blog.pageType != &quot;item&quot;&#039;&gt;
&lt;div expr:id=&#039;&quot;summary&quot; + data:post.id&#039;&gt;&lt;data:post.body/&gt;&lt;/div&gt;
&lt;script type=&#039;text/javascript&#039;&gt;createSummaryAndThumb(&quot;summary&lt;data:post.id/&gt;&quot;);&lt;/script&gt;
&lt;span class=&#039;rmlink&#039; style=&#039;float:left&#039;&gt;&lt;a expr:href=&#039;data:post.url&#039; target=&#039;_blank&#039;&gt;READ MORE - &lt;data:post.title/&gt;&lt;/a&gt;&lt;/span&gt;
&lt;/b:if&gt;
&lt;b:if cond=&#039;data:blog.pageType == &amp;quot;item&amp;quot;&#039;&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;

kemudian Silahkan langsung Simpan Template atau Pratinjau terlebih dahulu
Selamat blog anda sudah memiliki fitur Auto Read More 

Tambahan:

var thumbnail_mode = "float"; ( letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float))

summary_noimg = 250; (Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Jumlah karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Tinggi thumbnail dalam piksel)
img_thumb_width = 120; (Tinggi thumbnail dalam piksel)

pada  kode yang dibawah

target='_blank'

dapat dihapus jika tidak ingin membuka tab baru saat membuka halaman.

 Nah selamat mencoba dan semoga berhasil