Cara Menampilkan Custom Thumbnail di Blogger

Taufik Nurhidayat

Taufik Nurhidayat

Updated

3 min
Cara Menampilkan Custom Thumbnail di Blogger
On This Page

    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.

    Menambahkan Tag Komentar pada Thumbnail Blogger

    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.