Mengatasi Gambar ( Thumbnail ) Blur atau Buram di Blog

CrepictDGZ – Gambar pada halaman utama blog terkadang terlihat buram atau blur karena ukuran gambar yang tidak sesuai, Untuk Blogger newbie ini sering kali terjadi dan entah bagaimana cara mengatasinya.

Sebenarnya letak permasalahan pada ukurang default gambar yang kita pasang saat publikasi posting Blog, jika pas ya..tentu akan tampak atau tampil pada halaman utama seperti yang kita inginkan. Dan jika gambar terlalu kecil atau besar maka gambar yang akan tampil di halaman utama akan tampak blur atau buram atau bahkan terpotong tidak tampil penuh.

Hal ini bisa kita atasi dengan melalukan global resize thumbnail pada semua gambar yang tampil pada halaman utam Blog kita.

Mengatasi Gambar ( Thumbnail ) Blur atau Buram di Blog

# Cara ini adalah cara yang paling simple dan mudah dilakukan :

1. Silahkan masuk akun Blogger >> Edit HTML, cari kode berikut ini ( temukan kode serupa jika terkait masalah blur dengan gambar ( thumbnail ) yang lain.

s72-c

2. Silahkan ganti dengan kode seperti dibwah ini.

s72-c-k-no

3. Silahkan Simpan Templete Anda.....Selesai

# Kemudian kita lakukan dengan cara alternatif lain seperti dibawah ini

1. Silahkan masuk akun Blogger >> Edit HTML

2. Copy paste kode di bawah ini sebelum atau diatas kode </head>

<script type='text/javascript'><script type='text/javascript'>

//<![CDATA[

function crepictdgz_resize(e,t){var n=220;var r=160;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c-k-no/","/w"+n+"-h"+r+"-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'"/>';if(t!="")return image_tag;else return""}

//]]>

</script>

3. Kemudian cari kode seperti dibawah ini atau yang mirip seperti di bawah ini :

<b:if cond='data:post.firstImageUrl'>

<a expr:content='data:post.firstImageUrl'/>

</b:if>

Jika anda tidak menemukannya, silahkan cari menggunakan Ctrl + F lalu masukkan kode ini data:post.firstImageUrl . Karena kode ini default artinya semua template sama.

4. Jika sudah ketemu kode yang mirip/sama seperti kode pada no.3,Lalu masukkan kode dibawah ini tepat dibawah/setelah kode no.3

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:post.thumbnailUrl'>

<a expr:href='data:post.url'><div class='img-thumbnail'><script type='text/javascript'>

   document.write(crepictdgz_resize(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));

</script></div>

</a>

<b:else/>

<b:if cond='data:post.firstImageUrl'>

<a expr:href='data:post.url'><div class='img-thumbnail'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></div>

</a>

<b:else/>

<a expr:href='data:post.url'><div class='img-thumbnail'><img expr:alt='data:post.title' expr:title='data:post.title'/></div>

</a>

</b:if>

</b:if>

</b:if>

</b:if>

5. Lengkapnya akan tampak seperti dibawah ini

<b:if cond='data:post.firstImageUrl'>

<a expr:content='data:post.firstImageUrl'/>

</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:post.thumbnailUrl'>

<a expr:href='data:post.url'><div class='img-thumbnail'><script type='text/javascript'>

   document.write(crepictdgz_resize(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));

</script></div>

</a>

<b:else/>

<b:if cond='data:post.firstImageUrl'>

<a expr:href='data:post.url'><div class='img-thumbnail'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></div>

</a>

<b:else/>

<a expr:href='data:post.url'><div class='img-thumbnail'><img expr:alt='data:post.title' expr:title='data:post.title'/></div>

</a>

</b:if>

</b:if>

</b:if>

</b:if>

Catatan :

Jika tidak ada perubahan setelah Anda menerapkan cara diatas. Maka Anda harus menyesuaikan kode CSS  'img-thumbnail' ( lihat kode diatas ). Rubah sesuai kode CSS ( image ) yang terpasang pada template Anda. Memang untuk kode CSS  'img-thumbnail' diatas bisa tertulis/terpasan berbeda beda di setiap blog. Mungkin di blog lain bisa tertulis seperti : img_thumbnail, img_thumb,img-thumb, dll.

Cara mengganti :

Cari kode <b:if cond='data:post.firstImageUrl'> kemudian lihat tepat di sebelah kode tadi class image nya (umunya tampak seperti dibawah ini)

<b:if cond='data:post.firstImageUrl'>

<a expr:href='data:post.url'><div class='image CSS disini'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></div>

Jadi Anda tinggal mengganti 'img-thumbnail' dengan CSS image yang tertulis pada template blog Anda. Jika tidak disesuaikan CSS-nya maka tutorial diatas tidak akan bekerja/gagal.

Jika Sobat Blog anda masalah terkait tutorial saya diatas, Jangan Silahkan tinggalkan pesan pada kotak komentar dibawah artikel dibawah ini.

Semoga bermanfaat...