Bikin Tampilan Video Youtube Di Blog Seperti Televisi Yuk!

Ini muncul dari kebosenan aku melihat tampilan video di blog. Sepertinya gitu-gitu aja hehehe...bosen ah... Kemudian aku mulai searching di Google untuk menerima tutorialnya, tapi ibarat di dunia kasatmata jikalau tidak punya alamat malah nyasar ke mana-mana gak karuan ... hualah pusing jadinya... hahhaha...

Dari pada pusing gara-gara nyasar gak karuan masuk ke web esek-esek wikikik.... mending bereksperimen lah.... berbekal dari seringnya mengedit template blog alasannya gonta-ganti template dan melihat kode-kode script template (gara-gara ini wajah istri malah kelihatan ibarat kode...hahahaha), mulailah aku merangkai aba-aba yang ga tahu bener apa tidak, yang penting karenanya sesuai dengan selera saya...hehehe...

Bagaimana tertarik juga ingin membuat ibarat gambar di atas? Yuk kita coba bikin tampilan video di blog ibarat televisi ... (itu bukan televisi aku hehehe... aku pakai bangkai monitor box untuk nonton tv hahhaa). Bagi temen-temen, apabila melihat kode-kodenya kurang pas, tolong dibetulin ya... alasannya aku kurang tahu pakem bikin aba-aba HTML, yang penting tampilannya sesuai selera saya...hahaha... (jadi banyak ketawa nih....)

Langsung aja, ibarat biasa silahkan masuk ke blog Anda >> Dashboard >> Template >> Edit HTML >> Centang kotak kecil pada Expand Widget Templates. Cari aba-aba ]]></b:skin>, setelah ketemu simpan aba-aba CSS di awah ini DI ATAS/SEBELUM aba-aba tadi.

 
 .video-player{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTaosyDHiVCZ4HZEJpKWClFi-y6N8YKNvuAqSltENjO5ZIqralQiLSagThdhCQx6nO6q16p7c2H6mKe72bMxm7aLbYvOX63Fni3rXKVZ2N4UyoyxTZbmgVkw6dHERFMEnPYGfTlvJl4k/s1600/psd-samsung-p2370-monitor+3.png) no-repeat top center;height:458px;width:580px;padding-top:35px;margin-left:30px}
 

Tampilan ini untuk blog yang lebar halaman postingannya 600px, jadi jikalau halaman postingannya lebih kecil dari 600px, Anda harus menyesuaikan gambar backgroundnya lagi. Coba Anda copy url gambar yang berwarna merah dan paste di browser Anda kemudian save image, nah setelah itu silahkan sesuaikan lebarnya dengan menggunakan photoshop, kemudian upload lagi di blog Anda. Kemudian lebar dan tinggi videonya harus diadaptasi dengan gambar background barunya begitu juga pada aba-aba CSS-nya. Ya atur-aturlah di angka-angkanya itu agar pas...

Dan usahakan bagi yang mau memakai cara ini, upload lagi gambarnya di blog Anda dengan cara yang sama dengan di atas, copy url gambar yang berwarna merah dan paste di browser Anda kemudian save image, nah setelah itu silahkan upload lagi di blog Anda.

Nah untuk memanggilnya di postingan Anda, silhkan gunakan script di bawah ini pada postingan HTML Anda.

 
 <div class="video-player">
 <iframe height="281" src="URL VIDEO" width="500"></iframe>
 </div>
 

Silahkan ganti URL VIDEO dengan url video yang ingin Anda simpan pada postingan. Sebagai demonya silahkan nikmati video COBALAH MENGERTI - NOAH Feat.Momo Geisha di bawah ini.

Bagaimana tertarik juga untuk mencobanya di blog Anda? Silahkan curahkan imajinasi dan kreativitas Anda agar otak tidak beku... hahaha...

Selamat mencoba....

UPDATE:
Maaf ada yang kurang lengkap penjelasan di atas nih hehehe...
untuk URL VIDEO ganti dengan URL VIDEO dari embed videonya jangan dari URL di browsernya.