Bikin Tampilan Video Youtube Di Blog Seperti Televisi Yuk!

Bikin Tampilan Video Youtube Di Blog Seperti Televisi Yuk!

Bola Hero Gawai

Bikin Tampilan Video Youtube Di Blog Seperti Televisi Yuk!

Ini muncul dari kebosenan saya melihat tampilan video di blog. Sepertinya gitu-gitu aja hehehe...bosen ah... Kemudian saya mulai searching di Google untuk mendapatkan tutorialnya, tapi seperti di dunia nyata kalau 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 karena gonta-ganti template dan melihat kode-kode script template (gara-gara ini wajah istri malah kelihatan seperti kode...hahahaha), mulailah saya merangkai kode yang ga tahu bener apa tidak, yang penting hasilnya sesuai dengan selera saya...hehehe...

Tampilan Video Youtube

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

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


.video-player{background:url(http://3.bp.blogspot.com/-80cMqaO5JvI/USgg-w_ApjI/AAAAAAAAXUs/KR6ci0etVrQ/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 kalau 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 disesuaikan dengan gambar background barunya begitu juga pada kode CSS-nya. Ya atur-aturlah di angka-angkanya itu biar 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 biar 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.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
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!

×
×
×