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

Baca Juga

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Nh8uChkyYxbaku7WuoaflvtBzp407NIKPvh3uWnRQIdgBJFNYjuikfxcH7Espoyk6wMoVSEGzTIDdQCcqjRbSjgM_1pSBUwulmzrGrjwThHL7ccar9Upp6tOGCjy3-T__MeD06CFSN0V/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.*