Halo sobat jagoan. Jika kalian masih bisa menggunakan fitur edit tema klasik versi lama maka permasalahan mengenai thumbnail pada homepage sudah teratasi. Namun bagaimana jika kalian sudah mengupgrade fitur ke versi terbaru. Atau menggunakan editor tema versi terbaru ? Nah ini yang akan menimbulkan sedikit masalah. Pasalnya struktur yang terjadi pada blogger versi terbaru menjadi berubah dan bisa dibilang kita harus pintar merework keadaan ini.
Bagi sebagian developer template blogger diseluruh berbagai belahan dunia sangat bingung mengalami keadaan ini. Kemudian hal inilah yang mendorong saya untuk sedikit meluangkan waktu meneliti mengenai permasalahan ini. Sebab tak elok rasanya jika gambar yang berada pada blog kita menjadi buram dan kurang jelas. Tentu ini akan mengurangi nilai keindahan bagi blogger. Berbeda dengan pesaingnya wordpress yang tidak mengalami permasalahan yang berarti mengenai thumbnailnya.
Permasalahan yang terjadi saat mengupgrade dashboar blogger versi terbaru.
Sebenarnya saya belum mengetahui secara pasti apa yang menjadi penyebab mengapa tiba tiba semua thumbnail yang ada pada homepage menjadi blur saat pindah ke versi terbaru dari dahsboard blogger. Namun ada kejadian yang sedikit menarik disini. Setelah mengamati rupanya yang menjadi masalah adalah Nilai property width dan height pada image menjadi berubah. Sehingga struktur URL pada image yang dulunya hanya menggunakan S sekarang berubah menjadi W dan H.
Width dan height saat didefinisikan akan menghasilkan property value original dari image. Inilah yang mungkin menjadi alasan kenapa di versi terbaru kita ditekankan untuk tetap menggunakan nilai lebar dan tinggi pada image. Sedangkan diversi yang jadul image akan dipaksa secara otomatis menyesuaikan lebar dan tinggi sebuah wadah pada gambar. Kalau kalian memiliki gambar dengan resolusi yang tinggi diatas 1600 pixels maka secara otomatis akan muncul nilai property width dan height nya. Sedangkan untuk 600 pixel kebawah. Property image masih bisa disesuaikan sendiri secara otomatis oleh blogger.
Permasalahan ini sebenarnya sangatlah sepele tapi jika kurang jeli melihatnya maka akan menghasilkan gambar yang kurang powerfull. Apalagi jika kalian tidak mengetahui penyebab yang pasti. Nah untuk mengatasi hal ini telah admin rangkum dibawah agar teman teman bisa tetap menghasilkan gambar yang jernih tanpa buram sedikitpun. Untuk demo thumbnail dengan kejernihan yang baik anda bisa melihat nya pada template buatan saya dibawah ini :
DEMO
Mengatasi thumbnail blogger halaman depan blog buram/blur
Sebelum mengotak atik template anda. Sangat disarankan untuk terlebih dahulu membackup file template. Supaya jika terjadi eror anda memiliki backupnya. Dan merestorenya kembali.
Jika kalian menggunakan template premium dari berbagai sumber maka silahkan cari kode pemanggilan thumbnail nya. Kalian bisa menliti dahulu ataupun langsung mencari kode kode yang mirip dengan kode kode dibawah ini :
Contoh kode yang sering digunakan untuk memanggil thumbnail :
<a expr:href='data:post.url'>
<img class='thumbnail-post' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='data:post.thumbnailUrl' itemprop='url'/>
</div>
</a>atau :
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>atau :
<a expr:href='data:post.url' expr:title='data:post.title'>
<script type='text/javascript'>
document.write(thumbnail_post("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>intinya cari kode data:post.thumbnailUrl perhatikan pada area atau baris kode tersebut. Jika anda rasa kode tesebut merupakan kode pemanggil thumbnail untuk blog anda maka
silahkan hapus kode kode diatas dan ganti semua kode tersebut dengan kode dibawah 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, 750, "400:300")' expr:title='data:post.title'/>
</a></b:if>Jangan lupa untuk memudahkannya silahkan tulis secara lengkap kode nya dengan pembungkus tag thumbnail. Keseluruhan kodenya menjadi seperti ini :
<div class='thumbnail-post'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='data:post.firstImageUrl' itemprop='url'/>
<meta content='320' itemprop='width'/>
<meta content='172' itemprop='height'/>
</div>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 750, "400:300")' 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://1.bp.blogspot.com/-7ERihdIUAa8/WTAWHTX44yI/AAAAAAAAQB4/U9sDF7Lfyr0ZnZEbyyry2yrCfvx-pazdgCLcB/s1600/no-thumbnail_220.png'/>
</a>
</b:if>
</b:if>
</div>Sip silahkan simpan tema dan Lihat hasilnya, Hasilnya lumayan daripada hasil thumbnail sebelumnya. tetapi ketajaman gambar masih belum bisa dibilang oke untuk itu kita memerlukan sedikit sharpen image silahkan tambahkan kode berikut tepat diatas kode </body>
Javascript sharpen images :
<b:if cond='data:blog.url == data:blog.homepageUrl or data:view.isSearch or !data:view.isLabelSearch'>
<script>//<![CDATA[
const ghj= document.querySelectorAll('.thumbnail-post img');
for ( let i = 0; i < ghj.length; i++ ){
const fgh = ghj[i].getAttribute("src");
const rty = fgh.replace(/\/([^/]*)$/, "/$1?imgmax=2000");
ghj[i].src = rty;
}
//]]>
</script>
</b:if>Hasil Akhir :
catatan :
?imgmax=2000 pada kode diatas adalah jarak range sharpen untuk tema blogger yang saya buat silahkan kalian sesuaikan sampai mendapat hasil yang baik.
Tampak sedikit perbedaan bila kita menggunakan sharpen images untuk blogger thumbnail yang buram. Semoga membantu 😀
Terima kasih atas tutorialnya ya.