Header Ads

cara memasang auto read more di blog (memakai JavaScript)

Ini cara Membuat Auto Read More di Halaman Depan Blog mengunakan JavaScript (JS). Tips, kode, atau script Membuat Auto Read More di Halaman Depan Blog menggunanakan JS ini CB kutip dari Help Blogger.

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode <data:post.body/>.

Jika ada lebih dari dua <data:post.body/>, pilih yang kedua. Jika gagal, pilih yang ketiga atau pertama dst. Coba saja satu-satu hingga berhasil. 

3. Replace atau gantikode <data:post.body/> tersebut dengan kode di bawah ini:

  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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 class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Cari kode </head> dan COPAS kode berikut ini tepat di atasnya!

 <script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


5. SAVE Template!

CATATAN: 
1. Anda bisa mengganti ukuran gambar/thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.

2. Anda juga bisa mengubah jumlah/panjang karakter dengan mengganti angka 490 (jika postingnya tanpa foto) dan angka 400 (jika postingnya ada foto).

No comments

Powered by Blogger.