Mungkin banyak dari Kalian sampai saat ini belum menyadari tampilan thumbnail pada artikel blog yang menggunakan Template median ui sedikit terpotong. Atau mungkin Kalian sendiri yang saat ini menggunakan template yang sama kurang puas dari hasil design thumbnail yang setelah terpasang selalu kurang pas.
Nah! Jika memang hal diatas sedang Kalian alami. Maka bisa mencoba cara yang akan saya bagikan berikut ini. Yaitu dengan merubah ratio thumbnail pada template khususnya Median UI baik 1.5 dan 1.6
Sebenarnya cara ini bisa dilakukan pada template lain juga, tapi tentunya caranya akan sedikit berbeda tergantung pada kode yang digunakan pada template. Untuk konsepnya sama saja, silahkan kalian sesuaikan.
Ukuran Ratio Thumbnail Original Median UI
Pada template Median UI menggunakan ratio 18:9 dan pada tutorial kali ini akan kita coba rubah menjadi 16:9. Penggunaan ratio ini tentunya harus disesuaikan juga dengan design thumbnail kalian. Saya sendiri selalu menggunakan gambar berukuran 1280x720 yang mana jika diukur maka rationya adalah 16:9.
Sebelumnya coba kita lihat dulu perbedaan sebelum dan sesudah mengganti ratio thumbnailnya.
Ratio gambar Orginal 18:9
Sebelum dirubah, gambar thumbnail dengan ukuran 1280x720 pixel (16:9) ditampilkan lebih besar (zoom) dan sedikit terpotong pada sisinya
Ratio gambar setelah diubah 16:9
Setelah dirubah, gambar thumbnail dengan ukuran 1280x720 pixel (16:9) ditampilkan ditampilkan lebih kecil dan bagian yang terpotong tidak terlalu banyak.
untuk mengetahui rasio gambar kalian bisa lihat gambar di bawah ini, di sini saya mengedit gambar thumbnail menggunakan aplikasi android pixellab, di sini saya memilih youtube thumbnail dengan ukuran 1280 x 720 dan kalian bisa lihat aspect ratio : 16:9 itu adalah rasionya.
Cara Mengubah Ratio Thumbnail Template Median UI 1.5
Step 1 : Silakan masuk ke Dashboard blogger > Tema > Edit HTML.
Step 2 : Ada dua kode yang perlu dirubah. yang pertama silahkan gunakan Ctrl + F cari kode seperti di bawah. Untuk mempermudah silahkan cari kode berikut <b:includable id='snippetedPostEntry'>
<b:includable id='snippetedPostThumbnail'>
<div class='itemThumbnail'>
<a expr:href='data:post.url.canonical'>
<img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, "18:9")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</a>
</div>
</b:includable>
Bagian yang saya tandai, silahkan ubah sesuai ratio yang akan Kalian gunakan, misalnya 16:9
Step 3 : Kemudian berikutnya silahkan cari kode seperti dibawah ini. Untuk memudahkan silahkan gunakan Ctrl + F dan cari kode berikut <div class='postThumbnail'>
<b:if cond='data:view.isMultipleItems and data:post.featuredImage'>
<!--[ Post thumbnail ]-->
<div class='postThumbnail'>
<a expr:href='data:post.url'>
<img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, "18:9")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</a>
</div>
</b:if>
Bagian yang saya tandai, silahkan ubah sesuai ratio yang akan Kalian gunakan, misalnya 16:9
Cara Mengubah Ratio Thumbnail Template Median UI 1.6
Silakan masuk ke Dashboard blogger > Tema > Edit HTML gunakan Ctrl + F cari kode seperti di bawah ini. Untuk mempermudah silahkan cari kode berikut <b:includable id='postEntryThumbnail'>
<b:includable id='postEntryThumbnail'>
<b:if cond='data:post.featuredImage.isYoutube'>
<img class='imgThm lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 600, "18:9") : data:post.featuredImage.youtubeMaxResDefaultUrl' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<noscript><img class='imgThm' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 600, "18:9") : data:post.featuredImage.youtubeMaxResDefaultUrl'/></noscript>
<b:else/>
<img class='imgThm lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, "18:9") : data:post.featuredImage' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<noscript><img class='imgThm' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, "18:9") : data:post.featuredImage'/></noscript>
</b:if>
</b:includable>
perhatikan yang saya tandai 18:9 ada 4, silakan sesuaikan dengan ratio gambar yang Kalian gunakan. Misalnya 16:9.
Jika sudah semua, silahkan Simpan atau Preview untuk melihat hasilnya. Kemudian bandingkan sebelum dan sesudah Kalian melakukan perubahan ratio thumbnail pada template Kalian.
Sekian cara mudah mengubah ratio thumbnail pada template Median UI. Semoga bermanfaat dan jika ada pertanyaan jangan lupa tinggalkan komentar Kalian.