Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript

Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript

Untuk pertama kali,  pilih Dashboard, lalu Tata Letak dan Contreng tulisanExpand Widget Templates.

Selanjutnya,cari kode </head>,setelah ketemu tepat di ATASnya letakkan kode javascript berikut:

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 150;

summary_img = 150;

img_thumb_height = 100;

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>




Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk  hapus kode tersebut dan gantilah dengan kode berikut:

1. Read More Button Otomatis hanya berupa Gambar

• <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
  <span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span> 
  <b:else/>
  <data:post.body/>
  </b:if>

2. Read More Button Otomatis menggunakan Text

• <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
  <span style='float:right'><a expr:href='data:post.url'>Read More..</a></span> 
  <b:else/>
  <data:post.body/>
  </b:if>

Untuk  Tulisan Read More.. silahkan kalian ganti dengan text favoritmumu

Lalu simpan templates dan lihat hasilnya.

Sekian,,

Semoga bermanfaat..

;)