Menampilkan Thumbnail Youtube Di Related Posts Dan Popular Posts

Jika Anda sering menciptakan postingan video Youtube di blog Anda, maka Anda akan mempunyai dilema dengan related posts dan popular posts ialah tidak munculnya thumbnail video Youtube di kedua widget tersebut dan biasanya diganti dengan gambar no-image.

Sebenarnya kita dapat 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 memakai thumbnail Blogger. Dan thumbnail tersebut di ambil dari gambar pertama di postingan blog yang diupload melalui editor postingan (tidak dapat memakai URL gambar pihak ketiga).

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

Untuk mendapat thumbnail video Youtube, dapat memakai 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 dapat diganti dengan short URL http://i.ytimg.com

Atau jikalau mau gampang dapat gunakan Youtube Thumbnail Generator yang aku buat ini, silahkan coba DI SINI. Kemudian klik kanan dan Save Image As pada thumbnail yang Anda pilih.

Setelah Anda mendapat 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 isyarat ]]></b:skin>:

 .youtube-thumb {
       display:none;
       visibility:hidden;
 }

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

 <div class="separator youtube-thumb" style="clear: both; text-align: center;">
 <img border="0" src="URL GAMBAR" />
 </div>

Selesai, maka kini 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.
Sumber https://www.kompiajaib.com/

Share this post