Menampilkan Thumbnail Youtube Di Related Posts Dan Popular Posts

Menampilkan Thumbnail Youtube Di Related Posts Dan Popular Posts

Bola Hero Gawai

Menampilkan Thumbnail Youtube Di Related Posts Dan Popular Posts

Thumbnail Youtube
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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×