Menampilkan Thumbnail Youtube Di Related Posts Dan Popular Posts

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/26/2015

Jika Anda sering membuat postingan video Youtube di blog Anda, maka Anda akan memiliki masalah dengan related posts dan popular posts yaitu tidak munculnya thumbnail video Youtube di kedua widget tersebut dan biasanya diganti dengan gambar no-image.

Sebenarnya kita bisa mengatasi hal tersebut (tidak munculnya thumbnail video Youtube di related posts dan popular posts) dengan sedikit manipulasi di halaman postingan.

Seperti kita ketahui bahwa related post dan popular post menggunakan thumbnail Blogger. Dan thumbnail tersebut di ambil dari gambar pertama di postingan blog yang diupload melalui editor postingan (tidak bisa menggunakan URL gambar pihak ketiga).

Jadi untuk menampilkan thumbnail video Youtube di related posts dan popular posts, kita juga harus mengupload thumbnail video Youtube di postingan.

Untuk mendapatkan thumbnail video Youtube, bisa menggunakan URL berikut:
http://img.youtube.com/vi/VIDEO-ID/0.jpg atau
http://img.youtube.com/vi/VIDEO-ID/default.jpg – full size thumb
http://img.youtube.com/vi/VIDEO-ID/mqdefault.jpg – medium default
http://img.youtube.com/vi/VIDEO-ID/maxresdefault.jpg – high resolution
http://img.youtube.com/vi/VIDEO-ID/1.jpg – small thumb
http://img.youtube.com/vi/VIDEO-ID/2.jpg – small thumb
http://img.youtube.com/vi/VIDEO-ID/3.jpg – small thumb

Atau http://img.youtube.com bisa diganti dengan short URL http://i.ytimg.com

Atau kalau mau mudah bisa gunakan Youtube Thumbnail Generator yang saya buat ini, silahkan coba DI SINI. Kemudian klik kanan dan Save Image As pada thumbnail yang Anda pilih.

Setelah Anda mendapatkan thumbnail dari video Youtube yang Anda embed di postingan, silahkan upload gambarnya di postingannya.

Agar gambarnya tidak tampak di postingan, maka tambahkan CSS di bawah ini dan simpan di atas kode ]]></b:skin>:

.youtube-thumb {

      display:none;

      visibility:hidden;

}

Kemudian tambahkan kode youtube-thumb pada class yang membungkus image thumbnail video Youtube seperti di bawah ini.

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

<img border="0" src="URL GAMBAR" />

</div>

Selesai, maka sekarang akan muncul thumbnail di related posts dan popular posts untuk postingan video Youtube.

Sementara belum ada cara untuk mengatasinya secara otomatis, jadi Anda harus mengedit lagi semua postingan video Youtube Anda.