Cara Mengatasi Gambar Thumbnail Buram (Ngeblur) di Blogger
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("<data:post.thumbnailUrl/>","<data:post.title/>")); </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.
