Cara Menampilkan Otomatis Thumbnail Video Youtube Di Related Posts Dan Popular Posts Blogger

Halo sobat blogger.
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.

Jadi untuk menampilkan thumbnail video Youtube di related posts dan popular posts pada blogger / wordpress, kita bisa menggunakan dua cara

1. Dengan 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

VIDEO-ID Harus anda ganti dengan kode unik video dari youtube. misal URL Videonya
 https://www.youtube.com/watch?v=X22kKZ98oCY 

- Maka kode uniknya adalah X22kKZ98oCY
- Dan URL thumbnailnya menjadi http://img.youtube.com/vi/X22kKZ98oCY/0.jpg
http://img.youtube.com bisa diganti dengan short URL http://i.ytimg.com

2. Cara kedua lebih mudah. anda tinggal memasang kode html gambar (URL gambar ambil langsung dari URL video youtube ) dan jangan lupa bagian kode pengaturan size gambar, atur ke angka 0. Hal ini agar gambar hanya tampil sebagai thumbnail dan tidak akan tampil pada halaman posting.

Saya ambil contoh mencoba tampilkan gambar video youtube dengan alamat ini https://www.youtube.com/watch?v=X22kKZ98oCY
maka kode yang harus dipasang adalah seperti dibawah ini:

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

<img border="0" src="http://img.youtube.com/vi/X22kKZ98oCY/0.jpg" data-original-height="360" data-original-width="480" height="0" width="0" /></div>


<iframe width="560" height="315" src="https://www.youtube.com/embed/X22kKZ98oCY?rel=0" frameborder="0" allowfullscreen></iframe>
Kode gambar thumbnail diambil dari url id video youtube. Lihat yang saya kotak merah.

Hasilnya bisa anda lihat di postingan saya yang ada di http://www.bsm-computer.com/2017/10/Contoh-Hasil-Thumbnail-Video-dari-Youtube-Di-Related-Post-dan-Recent-Blogger.html
Selamat mencoba.




Share on Google Plus

About BSM Computindo

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment



Ada yang perlu Anda tanyakan?Link error,kritik dan saran..?Silahkan sampaikan di kolom komentar dibawah ini.

1. Klik select profile -->> pilih Name/URL.
2. Isi nama Anda dan isi URL dengan alamat Facebook Anda/ kosongkan saja.
3. Klik Lanjutkan.
4. Ketik komentar anda dan klik PUBLISH.
5. Bagi yang belum bisa berkomentar dengan HTML,silahkan klik disini.
6. Komentar yang kurang sopan,Spam/SARA otomatis akan kami hapus.

Terimakasih atas kunjungan Anda.