Cara Mengatasi Thumbnail Blur di Homepage Blogger Tampilan Terbaru

Pada tahun ini  Blogger resmi mengubah tampilan UI pada Dashboard nya hal ini membuat tampilan Blogger lebih fresh dan User Frendly dari tampilan sebelumnya. Apalagi Blogger Mobile seperti saya ini lebih nyaman dengan tampilan Blogger dengan versi sekarang, karena lebih ringan saat diakses di perangkat mobile.

Namun setelah mengubah UI Blogger bukannya tidak ada yang error banyak sekali error yang di alami Template Blogger karena script semuanya juga sudah berubah mulai dari Error pada Struktur Data, dan masih banyak lagi.

Pada artikel ini saya akan memberikan tutorial Cara Memperbaiki Gambar Thumbnail Blur di Homepage Blogger Tampilan Terbaru. Ini saya kutip pada blog bungfrangki yang telah mengupdate script tersebut.

Ini kenapa bisa thumbnail bisa Blur karena script pemanggil sudah tidak berfungsi lagi contoh script javascript nya seperti ini

<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>

Sedangkan pada HTML untuk manggil seperti ini

<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>

Terus bagaimana mengatasi hal tersebut, ikuti aja langkah berikut ini biar pemasangan tidak terjadi error.

Cara Memperbaiki Gambar Thumbnail Blur di Homepage Blogger Tampilan Terbaru

Masuk ke akun Blogger kalian untuk memulai edit HTML nya

Pilih menu Tema kemudian pilih titik tiga, pilih edit html, kemudian ganti kode pemanggil dengan kode seperti di bawah ini.

<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 bisa seperti di bawah 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 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>

Atau seperti ini, karena setiap template blogger berbeda - beda. Dan ditulis semua maka seperti di bawah ini 

<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/AVvXsEhQZuJCvoMvcg7-IY8cv-lNpKrTDYRqSQknm0jSzJU94GCvJ299JXS9axyn2uh-YK_Da25ZRedjbr3iKSFI3E-lw2S7nM-MVmGS84z-eqa00fEIpK8ikLIalajri341f6f0mRA0qfygMpQ/s1600/no-thumbnail_220.png'/> </a> </b:if> </b:if> </div> 

Setelah itu Save.

Nah itulah tutorial singkat dari saya Cara Mengatasi Thumbnail Blur di Homepage Blogger Tampilan Terbaru, jika ingin di tanyakan bisa melalui kolom komentar di bawah.