Cara Menampilkan Custom Thumbnail di Blogger
Thumbnail secara singkat bisa disebut sebagai gambar kecil atau gambar preview. Thumbnail pada blog maupun youtube bisa digunakan untuk menjelaskan konten apa yang akan disajikan dan dibahas. Jika kamu bingung tidak bisa membuat thumbnail sendiri coba Cara Membuat Thumbnail Blog Sederhana dengan Gimp
Cara Kerja Thumbnail Blogger
Thumbnail pada blogger diambil dari gambar yang kamu pasang dalam postingan. Jika gambar dalam postingan lebih dari satu maka gambar dengan urutan paling atas yang akan diambil sebagai Thumbnail. Jadi jika kamu ingin menampilkan thumbnail dengan gambar yang ditujukan maka taruh di urutan paling atas.
Thumbnail blogger tampil dalam widget FeaturedPost, Blog dan Popular Post. Jika template yang kamu pakai mendukung related posts disertai thumbnail maka akan tampil juga disana, selain itu akan tampil juga di sosial media.
Kelebihan Custom Thumbnail
Custom thumbnail yang dimaksud disini adalah menyembunyikan gambar thumbnail dari postingan, sehingga thumbnail pada halaman postingan blog tidak terlihat. Dengan menyembunyikan gambar tersebut, postingan kamu akan lebih terlihat rapi.
Menyembunyikan Thumbnail dari Postingan
Berbagai cara bisa dilakukan untuk menyembunyikan thumbnail dari halaman postingan berikut cara cara yang saya ketahui. Tapi sebelum menggunakan salah satu cara dibawah pastikan kamu sudah mengupload gambar pada postingan kamu.
1. Dengan Style
Dengan menambahkan class display:none
maka thumbnail tidak akan tampil, namun cara yang satu ini sangat tidak direkomendasikan karena akan berpengaruh pada score seo postingan kamu.
Caranya ialah tambahkan kode berikut pada img
gambar thumbnail yang ingin kamu sembunyikan dari postingan.
style="display:none"
Contoh penerapan kode.
<img src="https://blog.google.com/image1200x600.webp" style="display:none" />
Perlu di ingat cara ini sangat tidak direkomendasikan, silahkan baca bagian berikutnya.
2. Dengan Javascript
Cara yang kedua dengan menambahkan javascript pada template, cara yang satu ini masih bisa dipakai namun agak ribet alias kurang bersahabat bagi pembaca dan juga penulis. Namun Jika ingin tahu berikut caranya.
Terapkan kode javascript ini pada blog tepat diatas kode </body>
.
<script>document.querySelector('.post-body').querySelector('.separator').firstElementChild.remove()</script>
Maka setiap postingan akan terhapus gambar dengan urutan pertama dengan kondisi setiap gambar terbungkus <div class="separator">
. Namun kurang fleksibel jika kamu tidak ingin menyembunyikan thumbnail dari postingan, dan sering telat terhapus jika kecepatan internet lambat dan malah sering tampil terlebih dahulu baru terhapus.
3. Tambahkan Kode Komentar
Cara yang satu ini sangat saya rekomendasikan dan paling saya sukai, karena sangat fleksibel dan google pun membacanya sebagai komentar dari html sehingga tidak berpengaruh pada score seo. Jika kamu belum tahu tag komentar html berikut kodenya.
<!-- -->
Untuk menerapkan kode komentar pada gambar thumbnail supaya tidak tampil, kamu haru masuk ke tampilan html saat mengedit postingan. Jika belum tahu caranya silahkan lihat video dibawah.
Sekarang kamu tambahkan <--
pada awal dari <div class="separator">
jika tidak ada maka pada kode <img
dan diakhiri dengan -->
pada akhir dari kode </div>
. Lihat gambar berikut.
Contoh dari kode lengkapnya berikut
<!--<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-J1VWyX2zzts/X0-fWT0m_hI/AAAAAAAAF5s/CpR7UUuOzRou067x442Ic_lglu6LtJ62gCLcBGAsYHQ/s0/hide-thumbnail.png" style="display: block; padding: 1em 0; text-align: none;"><img alt="" border="0" data-original-height="600" data-original-width="1200" src="https://1.bp.blogspot.com/-J1VWyX2zzts/X0-fWT0m_hI/AAAAAAAAF5s/CpR7UUuOzRou067x442Ic_lglu6LtJ62gCLcBGAsYHQ/s0/hide-thumbnail.png"/></a></div>-->
Akhir Kata
Bagaimana? Cara ke tiga adalah yang paling saya sukai, selain fleksibel juga mudah cara tersebut tidak mempengaruhi score seo. Jikalau masih belum paham bisa tanyakan di kolom komentar.