Mengatasi Thumbnail Post Gambar Tidak Muncul Di Homepage Blogspot

Apa Penyebab Gambar Thumbnail Post Blogger Tidak Muncul?

    Dari berbagai macam test yang barusan kami lakukan, akhirnya sampai saat ini kami baru ketemu dua macam penyebab utama kenapa gambar thumbnail post blogger bisa sampai hilang dari beranda. Alasannya adalah :

• Alamat gambar blogger secara default sudah menggunakan HTTPS
• Struktur data sitemap blogger tidak menggunakan media:thumbnail

   Jadi, masalah utamanya adalah dikarenakan saat ini Google lebih suka dengan penggunaan HTTPS pada alamat URL situs-situsnya. Sebelumnya gambar-gambar yang kita upload lewat postingan di blog alamat gambarnya masih menggunakan HTTP biasa. Tapi sekarang sudah tidak lagi. Tampaknya Google sekarang ini memang sedang lagi serius pengen meningkatkan kenyamanan tiap pengunjung di dunia maya. :)

     Seperti yang dibahas pada salah satu artikel berjudul HTTPS as a Rangking Signal oleh situs Google Webmaster Central. Jadi iyaa kalau bisa pun kita sebagai pemilik blog, nantinya juga harus ngikuti aturan main ini. Setidaknya Sahabat harus terima kalau HTTP itu gak lebih baik dari layanan HTTPS. Iyaa jelas lah. Untuk dapatinnya aja kita harus bayar sertifikat dulu. :D

Terus kenapa kalau alamat gambarnya berubah jadi HTTPS? Apa hubungannya kok thumbnail post di beranda jadi hilang? Kalau gitu kan berarti lebih bagus pakek HTTP aja? -_-

    Jadi, dikarenakan penyebab pertama inilah maka muncul penyebab kedua yang saya sebutkan diatas tadi. Untuk melihatnya coba Sahabat buka halaman sitemap blog sahabat masing-masing. Secara default umumnya sitemap bawaan blogger adalah dengan alamat seperti ini :

1http://www.chaidir.web.id/feeds/posts/default?orderby=UPDATED

   Dari situ bisa dilihat di dua postingan saya yang gak muncul thumbnail-nya ternyata memang dari bagian entry postingan tersebut gak ada kelihatan tag media:thumbnail. Entah gimana ceritanya mungkin sistem blogger belum ngebaca gambar di postingan yang berawalan HTTPS tadi sebagai thumbnail. Padahal kalau kita share artikel ke media sosial, gambar yang ada di dalam postingan itu tetap bisa kebaca kok sebagai thumbnail. :D

Cara Mengatasi Gambar Thumbnail Hilang Dari Beranda

     Dari sedikit analisis diatas, maka sekarang kita sudah bisa coba cari penyelesaiannya gimana. Supaya gambar thumbnail post di blog kita bisa muncul seperti normal kembali. Biar tulisan-tulisan kita tetap kelihatan keren dan menarik untuk dilihat oleh pengunjung. :D

    Ada dua solusi yang bisa Sahabat gunakan. Kan penyebabnya ada dua tadi, jadi iyaa obatnya pun bisa dua juga. Tergantung Sahabat mau pilih cara yang mana. Atau mungkin besok-besok sudah ada lagi obat yang lebih mujarab. Untuk saat ini berikut cara mengatasinya :

1. Mengubah alamat gambar kembali menjadi HTTP
2. Gunakan fungsi firstImageUrl sebagai pengganti thumbnailUrl

   Untuk cara yang pertama, saya pikir agak merepotkan. Karna alamat gambar sekarang sudah secara otomatis menggunakan HTTPS, jadi setiap kali kita ingin membuat postingan terbaru kita juga harus mengubah alamat gambarnya. Caranya kalau biasa Sahabat ngetik artikel pada mode Compose, untuk mengubah alamat gambar menjadi HTTP Sahabat harus pindah ke mode HTML.

Cari kira-kira yang kodenya seperti ini :

12345<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIQQWbn0hAnNO9neYL9MKWhI8IUXYOzq5x0BuoIhbDK7oDxFFMVJz5i4AHY0WWkEr8zbcTlzQPpUQ2upeRXiq89tmlKlGGIcOxEbxSaoqMZDOE84en9_NPcdQgZEpQ2d9k2s7tnfIANDu/s1600/https-for-security.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIQQWbn0hAnNO9neYL9MKWhI8IUXYOzq5x0BuoIhbDK7oDxFFMVJz5i4AHY0WWkEr8zbcTlzQPpUQ2upeRXiq89tmlKlGGIcOxEbxSaoqMZDOE84en9_NPcdQgZEpQ2d9k2s7tnfIANDu/s400/https-for-security.png" width="400" />

</a>

</div>

Kemudian tinggal hapus aja huruf S yang ada dibagian src="https://blablabla

   Kalau misalkan di postingan tersebut ada banyak gambar, minimal ada satu yang diubah. Biar yang satu itu bisa kebaca sebagai gambar thumbnail. :)

Solusi Jitu Supaya Gambar Thumbnail Blog Muncul Kembali

    Alternatif cara yang kedua, ini jauh lebih mudah dan gak merepotkan. Jadi untuk menampilkan gambar thumbnail di beranda blog itu, pada template umumnya pasti menggunakan kode HTML berikut ini :

123<a expr:href='data:post.url'>

<img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/>

</a>

   Singkatnya atribut expr:scr='data:post.thumbnailURL' ini lah yang akan memanggil gambar dari struktur data blogger, untuk ditampilkan sebagai thumbnail post di homepage kita. Sementara seperti yang saya jelaskan diawal tadi tag media:thumbnail tidak ada. Jadi iyaa atribut HTML ini gak akan nemukan apa-apa untuk ditampilkan.

    Solusi jitu untuk mengatasinya adalah dengan memakai teknik conditional tag blogger. Saya gak akan jelaskan panjang lebar, takutnya Anda malah bosan baca tulisan ini. Iyaah pokoknya begitulah.

   Untuk menggunakan cara yang kedua ini, pertama Anda masuk dulu ke Dashboard, kemudian buka Template - Edit HTML. Setelah itu gunakan ctrl + F untuk mencari kode <b:if cond='data:post.thumbnailUrl'>. Baru kemudian copy paste kode HTML berikut ini :

(klik dua kali lalu copy)

123456789101112131415<b:if cond='data:post.thumbnailUrl'>

  <a expr:href='data:post.url'>

    <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/>

  </a>

<b:else/>

  <b:if cond='data:post.firstImageUrl'>

    <a expr:href='data:post.url'>

      <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.firstImageUrl'/>

    </a>

  <b:else/>

    <a expr:href='data:post.url'>

      <img alt='no image' class='noimage post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfB1780SUi3uuVPe_jt8Iaxrfb27mAZ7jM9d_1urMGdEU91G8zm3vEU83apJEsCBvI5SDpgPKno3C8sGBQpsaxpqs6jmIGdHs53nBIonIpSlRakbs4eaElu3JDZ0C_wPYiD893b9Yx01U/s320/no-image-chaidir-web-id.png'/>

   </a>

 </b:if>

</b:if>

   Sebelum mengotak-atik, silahkan diperhatikan dulu kode HTML yang ada di template Sahabat. Apakah beda dengan yang saya berikan diatas? Atau sama aja? Kalau template saya sih agak beda, tapi iyaa intinya sama lah. Mungkin sebagian template ada yang gak menggunakan firstImageUrl. Jadi tinggal ditambahkan itu saja. :D

   Saya jelaskan sedikit, maksud dari penggunaan kode HTML diatas adalah ada tiga macam kondisi yang digunakan untuk memunculkan gambar thumbnail di beranda blog kita.

1. Tampilkan gambar dari alamat HTTP, jika tidak ada..
2. Tampilkan gambar yang paling pertama (HTTPS juga bisa dibaca), jika tidak ada..
3. Tampilkan gambar default no-image (bisa atur sendiri dengan alamat gambar yang kita mau)

   Jadi, dengan cara yang kedua ini cara pertama tetap bisa digunakan (kalau rajin). Tapi kalau cuman ngandalin cara pertama aja, sewaktu-waktu kita lupa ubah alamat gambar ke HTTP iyaa thumbnail post tetap gak akan muncul. :D

Catatan :
Alamat gambar yang dipanggil oleh fungsi tag data:post.thumbnailUrl dengan fungsi tag data:post.firstImageUrl jelas berbeda. Jadi, kalau Anda ada menggunakan javascript resizeThumb maka untuk gambar yang ditampilkan firstImageUrl juga harus disesuaikan ukurannya.

[ UPDATE ]
    Berhubung ada Sahabat blogger yang nanya, jadi baiknya saya update saja lah tulisan ini. Untuk beberapa template terkadang ukuran thumbnail bisa saja perlu diatur lagi dengan menggunakan javascript. Seperti catatan yang diatas, karna gambar yang muncul beda maka kita juga perlu menambahkan javascript khusus untuk kondisi firstImageUrl.

Silahkan gunakan script berikut ini, tambahkan saja tepat dibawah kode HTML <b:if cond='data:post.firstImageUrl'>.

12345678<script type='text/javascript'>

//<![CDATA[

function resizeThumbo(el, from, to) {$(el).each(function() {$(this).attr({'src': $(this).attr('src').replace('/s'+from+'/', '/s'+to+'-c/'),'width': to, 'height': to});});}

$(function() {resizeThumbo('.thumbx img', '1600', '250');});

$(function() {resizeThumbo('.thumbx img', '640', '250');});

$(function() {resizeThumbo('.thumbx img', '320', '250');});

//]]>

</script>

    Sekian dulu ulasan tentang masalah thumbnail post gambar yang hilang dari beranda blogger ini. Mudah-mudahan bisa sedikit membantu sahabat blogger yang masih bingung. Sekiranya ada yang perlu didiskusikan, silahkan tinggalkan komentar. :D

Sampai Jumpa!! Semoga Berhasil..