Rabu, Maret 30

Cara Baru Membuat Read More Otomatis

Kemarin setelah mencoba membuat read more otomatis berdasarkan sumber dari referensi sebelumnya (Read more otomatis), ternyata ada beberapa kekurangan. Yakni dalam hal pembuatan halaman tambahan. Dari postingan Read More Otomatis sebelumnya untuk membuat halaman tambahan kita akan mengalami kesulitan yakni pada halaman yang kita buat akan muncul juga tanda read more padahal hal ini tidak dibutuhkan dalam halaman yang yang bukan posting. Berikut cara mengatasinya :

Langkah Pertama cari kode berikut  <div class='post-body entry-content'> setelah ketemu blog kode tersebut sampai dengan 
<a expr:href='data:post.url + &quot;#more&quot;'> <data:post.jumpText/> </a> 
</div>
</b:if>
dan ganti dengan kode di bawah :
<div class='post-body entry-content'>

<p><script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 225;
</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 = 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>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more &#187;</a></div>
</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></p>

      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/> </a> 
      </div>
    </b:if>

Dan hasilnya bisa anda lihat sendiri

**Selamat Mencoba**

Tidak ada komentar: