June 17, 2015

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

June 17, 2015

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='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.*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

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

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

    ReplyDelete

Contact Form

Name

Email *

Message *