Blogermie.com: Trik Sederhana Menghilangkan Thumbnail Image Pada Auto Read More

09 Oktober 2011

Trik Sederhana Menghilangkan Thumbnail Image Pada Auto Read More

Sejenak saya berpikir, Membenahi tampilan blog ini yang kadang kurang sempurna, membuat saya canggung untuk gonta-ganti template. Mungkin sobat blogger juga mengalami hal yang sama seperti ini.
Menuju tutorial saya sebelumnya yakni Cara membuat Auto Read more, Berulang kali itu pula saya melihat Home screen Blog ini yang rancu lantaran Thumbnail gambarnya nampak jelek, walaupun saya sudah mengatur resolusi gambar dan set Karakter-nya agar nampak minim.
Ironis sekali bukan?.

Membuat Read More otomatis

Kemudian saya berpikir bagaimana untuk menghilangkan Thumbnail Image Pada Auto Read More tersebut, Setelah Sedikit modifikasi CSS dan Googling di internet, akhirnya saya dapat menyeleksi adanya Kode HTML pada Script Auto read more yang perlu ditambahkan

Jika Sobat Blogermie Pernah membaca Tutorial Blog saya tentang Membuat Read More otomatis, maka sobat akan menemukan kode script seperti berikut :
<script type='text/javascript'>
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;
</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; visibility: hidden; display: none"><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>

Kode Yang berwarna merah itulah yang harus disematkan. Sederhananya kode tersebut hanyalah untuk menyembunyikan Thumbnail image agar tidak nampak pada homescreen awal, tetapi tidak akan mengubah pengaturan thumbnail/gambar jika masuk ke halaman artikel.

Semoga Trik Sederhana Menghilangkan Thumbnail Image Pada Auto Read More cukup membantu sobat semua.
Happy Blogging
Heru Prasetyo Blogermie.com Updated at: 10/09/2011 11:54:00 AM

14 komentar:

  1. terimakasih mas, akhirnya ketemu juga nih :)
    maen2 juga ke http://fajar-ms.blogspot.com/ hhe

    BalasHapus
  2. Thanks gan, blog ane bisa ilang thumbnail-nya... :D

    BalasHapus
  3. Balasan
    1. Ok mas. silahkan berkunjung kapan saja dan semoga tutorialnnya bermanfaat

      Hapus
  4. Makasih mas heru, akhirnya berhasil juga walaupun agak sedikit berbeda, di blog saya gak ada tulisan "imgtag"nya tapi "img_thumb" semua.

    BalasHapus
    Balasan
    1. kurang lebihnya sama, tergantung script auto readmorenya mas :).
      Salam ^_^

      Hapus
  5. Makasih banyak bang..
    tutornya bermanfaat banget dan langsung work

    BalasHapus
  6. wah mas, tengkyu berat lho. langsung worked!

    BalasHapus
  7. yuhhu, makasih gan berhasil saat saya praktekkan :D

    BalasHapus
  8. kok udah dicoba ga berhasil ya? thumbnail tetep muncul

    BalasHapus