Cara Mengatasi Gambar Thumbnail Buram (Ngeblur) di Blogger

Pembaruan blogger memang cukup memudahkan bagi beberapa orang. Namun bagi beberapa pengguna yang menggunakan template tertentu, adanya pembaruan ini ternyata juga berpengaruh pada sebagian tampilan blog yang menjadi sedikit bermasalah salah satunya gambar thumbnail yang buram/blur.

Pada artikel ini saya akan menjelaskan bagaimana cara mengatasi gambar thumbnail yang buram/blur baik pada tampilan deskop maupun mobile saat membuat postingan baru. 

Seperti yang kita tau selain sebagai penggambar atau sampul artikel, thumbnail yang bagus dan menarik juga dapat menambah kualitas dan branding sebuah blog. Blog yang berkualitas pasti memiliki gambar thumbnail yang bagus dan menarik.


Cara Mengatasi Gambar Thumbnail Buram (Blur) di Blogger

disini saya akan membagikan 2 cara yang menurut saya mudah dan simple jadi jangan di skip skip bacanya ya supaya kalian mengerti.

1. Mengubah Size Gambar Jadi Original Size.

  • Buka blogger.com, lalu login ke akun blog Kalian.
  • Klik dan masuk ke menu POST. 
  • Pilih artikel yang thumbnailnya pecah atau buram terus edit.
  • Kemudian, pada gambar thumbnailnya kalian klik
  • Setelah ikon pilihan muncul kalian pilih ikon settings atau ikon gerigi.
  • Selanjutnya, ubah size atau ukuran fotonya menjadi original size/ukuran asli dan klik selesai.
  • Done, cek gambar Thumbnail blog sudah tidak buram lagi kan. 


    2. Edit Thema / Template

    • Buka akun blogger anda.
    • Pilih menu thema dan backup template lebih dulu untuk antisipasi.
    • Selanjutnya klik edit html untuk mengedit template. 
    • Cari kode berikut ini di dalam template anda.

    <a expr:href='data:post.url'><script type='text/javascript'> document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;)); </script></a>

    • Kalo dua kode seperti di atas dalam template anda, silahkan ganti keduanya dengan kode 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, "300:200")' expr:title='data:post.title'/></a>

    • Setelah itu letakkan kode penutup </b:if> sebelum kode </div> atau tepatnya di atas kode </div> untuk element tersebut. Contoh hasil akhirnya seperti berikut:

    <div class='post-thumbnail'> <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, "300:200")' 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' itemprop='image'/></a><b:else/> <a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:title='data:post.title' itemprop='image' src='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png'/></div></a>  </b:if> </b:if> </div>


    • Silahkan simpan kembali template anda dan lihat hasilnya.

    Sekian tutorial dari saya tentang cara mengatasi gambar thumbnail yang buram/blur semoga bermanfaat untuk kalian semua. 
    Next Post Previous Post
    No Comment
    Add Comment
    comment url