Mengatasi Thumbnail Image Tidak Muncul & Buram (Blur) di Blog

Mengatasi Thumbnail Image Tidak Muncul & Buram (Blur) di Blog

No Image Available
Cara Mengatasi Thumbnail Image Tidak Muncul di Halaman Depan Blog sekaligus mengatasi Gambar Thumbnail yang Buram (Blur).

THUMBNAIL image yaitu gambar ukuran kecil yang muncul di halaman depan blog, bisa di bawah judul atau di sampingnya. Gambar thumbnail ini biasa ada di homepage blog yang menggunakan Auto Readmore atau ringkasan posting di homepage.

Banyak template blog yang mungkin "jadul" sehingga gambar thumbnail tidak muncul. Sebagai gantinya, biasanya muncul gambar lain bertuliskan "No Image Available", seperti gambar ilustrasi posting ini.

Cara Mengatasi Thumbnail Image Tidak Muncul

GANTI:
<b:if cond='data:post.thumbnailUrl'> ..... kode lainnya ..... </b:if>

DENGAN:
<b:if cond='data:post.thumbnailUrl'>
  <a expr:href='data:post.url'>
    <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/>
  </a>
<b:else/>
  <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'>
      <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.firstImageUrl'/>
    </a>
  <b:else/>
    <a expr:href='data:post.url'>
      <img alt='no image' class='noimage post-thumbnail' src='http://lh4.googleusercontent.com/-ZlvikLB3yVw/VXHIr0JIJOI/AAAAAAAAAv0/2-P8lhEpmqE/s265-no/no-image.png'/>
   </a>
 </b:if>
</b:if>

Mengatasi Gambar Thumbnail Buram

Gambarnya Jadi Buram?
Jika gambar thumbnail jadi buram (blur), maka untuk memperjelasnya simpan (copas) kode berikut ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + 

size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
} resizeThumb('Blog1', 300);
//]]>
    </script>
  </b:if>
</b:if>
<div class='clear'/>

di bawah kode:

<b:section class='main' id='box-posting' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable>
... ada rangkaian kode lainnya di sini ....
</b:includable>
</b:widget>
</b:section>

Itu dia cara Mengatasi Thumbnail Image Tidak Muncul & Buram (Blur) di Halaman Depan Blog.*

Thanks for reading Mengatasi Thumbnail Image Tidak Muncul & Buram (Blur) di Blog | Labels: Desain Blog

1 komentar on Mengatasi Thumbnail Image Tidak Muncul & Buram (Blur) di Blog

  1. thanks
    image rezisenya work
    cuma kalo bisa tambahin penjelasan cara kerja kodenya

    ReplyDelete

1. Komentar spam, link aktif, dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat/bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *