Mengatasi Gambar Hompage/Thumbnail Homepage Blur Pada Template Gampang BungFranki

Mengatasi Gambar Hompage/Thumbnail Homepage Blur Pada Template Gampang BungFranki - Menjadi seorang pemula dalam dunia konten blog pasti memiliki banyak kendala. Sebagai pendatang baru, mungkin tidak semua bisa memahami bahasa template yang akan digunakan. Sehingga, kadangkala masalah pun akan dihadapi dalam menata sebuah blog.

Picture by: Bang Gaos Blog

Seperti dalam menggunakan sebuah template, tentu masih ada kendala-kendala tertentu yang akan dihadapi. Sebagai contoh yang sekarang saat ini pernah saya hadapi, yaitu Thumbnail Home yang Blur saat menggunakan template Gampang buatan ThemeIndie.

Sebelumnya saya ucapakan terima kasih kepada Bung Frangki selaku owner ThemeIndie yang sudah membagikan versi free dari template GampanG. 

Penyebab Thumbnail Blur di Blogspot

Thumbnail Homepage atau biasa kita sebut gambar cover di halaman utama sebuah blog merupakan daya tarik tersendiri dibuatnya sebuah konten. Selain sebagai penjelas sebuah isi dari konten, Thumbnail bisa menjadi salah satu bagian estetik sebuah konten blog.

Sebenarnya ada banyak hal yang menjadi penyebab blur-nya sebuah Thumbnail. Satu diantaranya, dikarenakan berubahnya tampilan baru daru sebuah dashboard blogger.com yang berganti ke versi terbaru. Diyakini, pihak google memberikan beberapa perubahan yang berdampak pada tampilan sebuah template yang digunakan. Begitulah menurut penjelasan dari Bung Frangki sendiri, dan salah satu template yang berdampak yakni template GampanG yang kini telah saya gunakan.

Inilah JavaScript yang digunakan untuk memanggil Thumbnail

<script type='text/javascript'>

//<![CDATA[

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

//]]>

</script>

Jika di dalam HTML, kode pemanggilnya sebagai berikut;

<a expr:href='data:post.url' expr:title='data:post.title'><script type='text/javascript'>

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

</script></a>

Cara Mengatasi Thumbnail Blur Pada Template Gampang BungFranki

Sebelumnya saya telah menggunakan template lain untuk blog. Namun tidak merasa puas karena iklan adsense saya tidak muncul dengan sempurna. Kesannya seperti tertahan saat saya setting auto ads. Dan oleh karena itu pula akhirnya saya memutuskan kembali menggunakan template GampanG BungFranki. 

Setelah saya lakukan pemasangan, kendalanya ialah gambar Thumbnail ada yang blur. Kurang lebih hasilnya seperti berikut;

Dan berikut ini cara mengatasinya;

1. Buka Dashboard Blogger Kamu

2. Masuk ke menu Tema

3. Buka Edit HTML

4. Ganti Kode HTML pemanggil thumbnail yang saya sebutkan diatas

Kamu bisa menggantinya dengan Kode berikut:

<b:if cond='data:post.thumbnailUrl'><img class='post-thumb' expr:alt='data:post.title' height=' ' expr:src='resizeImage(data:post.firstImageUrl, 300)' expr:title='data:post.title' width=' '/></b:if>

atau yang ini:

<b:if cond='data:post.thumbnailUrl'><a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 450, &quot;300:200&quot;)' expr:title='data:post.title'/></b:if>

Atau bisa juga seperti ini:

<b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 300, &quot;16:9&quot;)' expr:title='data:post.title'/></b:if>

dan bisa juga digabungkan menjadi seperti berikut:

<div class='thumbnail-wrapper'>

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

<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 450, &quot;300:200&quot;)' expr:title='data:post.title'/>

</a> 

  <b:else/>

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

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

</a>

  <b:else/>

<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3xPnhokyQB3WRLyuaC33akqxI6H5A7YHhBjbCqnF2BCoK786qeqrVRuCd-jnbdqqW9f5oUbpf1OE5SLbt-ZJKe9_z6FLzXWNJmpkuTldR7jgXWx5UIMhNx8lwsr-Me6MQLYcoOcoRRgI/s1600/no-thumbnail_220.png'/>

</a>

  </b:if> 

  </b:if>

</div>

5. Simpan Tema dengan mengklik tombol Save.

Saat saya mengaplikasikan cara ini, saya hanya cukup menggantinya dengan kode yang pertama. Untuk penggunaan pada template lain mungkin berbeda rasa dan cara. Mengatasi Gambar Hompage/Thumbnail Homepage Blur Pada Template Gampang BungFranki telah selesai. Jika dirasa menemukan masalah lain silahkan berkomentar dibawah ini. Terima kasih guys.

Sumber:

https://www.themeindie.com/

https://www.bungfrangki.com/2020/05/thumbnail-blur-di-blogger-terbaru.html