Bikin Tampilan Video Youtube Di Blog Ibarat 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 mendapat tutorialnya, tapi menyerupai 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 yaitu gonta-ganti template dan melihat kode-kode script template (gara-gara ini wajah istri malah kelihatan menyerupai kode...hahahaha), mulailah aku merangkai isyarat yang ga tahu bener apa tidak, yang penting akhirnya sesuai dengan selera saya...hehehe...

Bagaimana tertarik juga ingin menciptakan menyerupai gambar di atas? Yuk kita coba bikin tampilan video di blog menyerupai 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 yaitu aku kurang tahu pakem bikin isyarat HTML, yang penting tampilannya sesuai selera saya...hahaha... (jadi banyak ketawa nih....)

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

 
 .video-player{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rUlF3rkjJEr1ZBa6ZV-N7kE7c5mqXcCrkCt6ssI3H2I6Hag5zBEpEZnE3bep7h5WFPAFUcf5zTqnvGK_HG121pvMG0vZpLAdrkC8ugNDeHWDVDzUNEmPm8oHv81LkuC2a8UE_f3LI2Y/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 lalu save image, nah sesudah itu silahkan sesuaikan lebarnya dengan menggunakan photoshop, lalu upload lagi di blog Anda. Kemudian lebar dan tinggi videonya harus diubahsuaikan dengan gambar background barunya begitu juga pada isyarat CSS-nya. Ya atur-aturlah di angka-angkanya itu semoga pas...

Dan usahakan bagi yang mau menggunakan 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 lalu save image, nah sesudah 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 semoga otak tidak beku... hahaha...

Selamat mencoba....

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

Sumber https://www.kompiajaib.com/

Share this post