Membuat Read More Otomatis dengan Thumbnail Blogger

Sebelumnya Blogger masih pake cara lama untuk untuk membuat Read More blog mereka, dengan cara menambahkan tag <span id=”fullpost”> dan </span> setiap kali kita posting di blog yang dinilai Blogger terlalu rumit dengan segala keterbatasanya. Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger sepertihalnya yang saya gunakan pada Blog Sederhana Saya ini.


Cara Membuat Read More Otomatis dengan Thumbnail di Blogger adalah sebagai berikut :

• Silahkan Login dan masuk pada Edit.
• Tambahkan kode dibawah ini diatas kode </head> :
  
  <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 Fais

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>
  
  
  
  
  Ubah angka di atas sesuai kebutuhan :
  summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
  summary_img = 340; adalah tinggi potongan artikel dengan gambar
  img_thumb_height = 100; adalah ukuran tinggi thumbnail
  img_thumb_width = 120; adalah ukuran lebar thumbnail
  
  
• Selanjutnya cari kode <data:post.body/> lalu ganti kode tsb dengan kode berikut:
  
  <b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' 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>

Referensi Artikel :

• http://www.o-om.com/2009/04/cara-pasang-auto-read-more-terbaru-part.html
• http://www.lp3knevata.co.cc/2010/02/cara-membuat-read-more-otomatis-pada.html
• http://miscah.blogspot.com/2009/09/cara-membuat-read-more-otomatis.html