Monday, March 6, 2017

Cara Membuat Tampilan Video Youtube Seperti TV Di Blog

Sahabat Setia Videoblog  Ayo Kita Nonton Youtube Pake Smart TV di Blog!.Berawal dari pencarian tutorial blogger untuk memodifikasi tampilan blog,saya menemukan sebuah tutorial bagaimana cara Membuat Tampilan Video Youtube Seperti TV Di Blog.

Saya sangat tertarik dan berniat untuk mencobaya,pada awalnya saya gagal dan bukanya tampilan blog nambah keren,yang ada malah semerawutan kaya kapal pecah.Sebenarnya ngak ada yag salah dengan script yang di berikan sama admin cuman blog saya memang kurang pas dengan ukuran gambarnya karna halaman postingan saya relatif lebih kecil selain itu juga pada waktu itu masih belum punya Photoshop untuk merubah ukuran gambar backgroundnya.
Membuat Tampilan Video Youtube Seperti TV Di Blog
Dengan koneksi yang terbatas susah payah saya download photoshop dengan dengan tujuan ingin menerapkan scrip ini pada blog saya dan alhamdulillah hasilnya ngak sia-sia.Saya sangat berterimakasih sama admin karna telah membagi ilmunya pada kita semua.
Bagaimana sobat tertarik untuk menerapkanya di blog,kalo tertarik ini dia langkah langkah untuk membuatnaya :


1. Masuk ke blog sobat
2. Pilih Dashboard >> Template >> EDIT HTML
3. Kemudian centang Expand Widget Templates
4. Selanjutnya cari code ]]></b:skin>
5. Letakkan code berikut ini, tepat di atas code ]]></b:skin>



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


Kalo sobat mau gambar televisinya di ubah,search ajah di google terserah sobat mau ganti pake gambar apa aja bisa.Usahakan gambar yg akan di pakai breformat PNG transparan supaya gampang dieditnya.Setelah itu upload lagi gambarnya di blog Sobat sendiri kemudian copy url gambar yang telah di modifikasi tadi dan pastekan ke url gambar yang berwarna merah.

Nah untuk memanggilnya di postingan Sobat, silhkan gunakan script di bawah ini pada postingan HTML Sobat,ingat ya bukan di compose
<div class="video-player">
<iframe height="281" src="URL VIDEO" width="500"></iframe>
</div>
Keterangan :
Ganti code yang berwarna merah dengan URL video youtube yang di embed.Lebar dan tinggi videonya harus disesuaikan dengan gambar background begitu juga pada kode CSS-nya. Aturlah angka-angkanya itu biar pas.
Kalo sobat blm tau cara mendapatkan code di embed youtube silahkan klik Cara Mendapatkan Kode Embed Youtube

Untuk demonya saya kasih lagu dari Repvblik - Sandiwara Cinta



NB :
Kalau sobat kesusaha mengatur posisi video supaya letaknya berada di tengah gunakan tambahan kode script <div align="center">Kode Video Yang Tadi</div>
Kira kira kalo di satukan kode scripnya jadi seperti ini :

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

Ok sekian saja,maaf maaf aja ya klo ada yang salah.Smoga artikel ini dapat bermanfaat,selamat mencoba...