Cara Menampilkan Custom Thumbnail di Blogger

Cara Menampilkan Custom Thumbnail di Blogger

data:post.author.name
Published:
Updated:

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.

Kelebihannya postingan blog akan terlihat lebih 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.

Cara Menampilkan Custom Thumbnail di 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.


Comments

  1. Kalau misalnya saya terapkan cara nomor 3 dan saya taruh di akhir postingan. Apakah thumbnailnya tetap akan terambil?

    ReplyDelete
    Replies
    1. Tergantung mas, jika gambarnya hanya ada satu yaitu thumbnail saja maka thumbnail akan terambil. Kalau gambar ada lebih dari satu maka thumbnail akan diambil dari gambar dengan urutan paling atas.

      Delete

Post a comment

- Gunakan <em>kode yang sudah diparse html</em> untuk menampilkan kode.
- Tidak diperbolehkan menggunakan hyperlink