.png)
Advertisements
Advertisements
Bagi blog anda yang berkategori hiburan pasti sangat sering memasukkan atau embed video dari YouTube ke dalam postingan blog dengan berbagai macam tujuan dan memang sangat mudah untuk melakukannya dan saya menyakini bahwa anda sudah sangat sering melakukannya. Pertanyaanya apakah anda sudah puas dengan tampilan yang standard tersebut?
Dari sanalah timbul ide untuk membuat tampilan video-video yang dipasang di blogger terlihat lebih kreatif dan pro. Tentunya saya juga sangat mempertimbangkan efek kecepatan pemuatan laman agar tidak berpengaruh lelet dan tetap bersih.
Saya membuat dan menamai skin yang khusus untuk membalut video yang dipasang di posting blog dengan nama "Video Player Keren" atau VPK yang saya buat untuk pengguna google blogger dengan menggunakan murni CSS3 yang bersih dan valid. Cara kerja dari VPK ini akan menampilkan video yang anda embed menggunakan iframe dengan skin yang mirip seperti tampilan tablet lengkap dengan kamera dibagian atasnya. Silahkan lihat demonya di bawah lalu coba untuk memutar videonya.
Persiapan :
1) Salin semua kode dibawah ini:
2) Masuk ke Blogger lalu klik Template
3) Lakukan Back Up lalu klik Edit HTML
4) Cari kode ]]></b:skin> lalu pastekan semua kode tersebut tepat diatasnya.
Langkah-langkah (penerapan) :
1) Masuk ke Blogger lalu klik New Post
2) Klik Mode HTML (disamping mode Compose)
3) Cari video yang ingin anda embed dalam format iframe
4) Tempatkan Tag section dibawah ini pada mode HTML diantara kode iframe video yang di embed. Misal
5) Klik Pratinjau lalu Publikasikan
Sekarang tampilan baru dari video youtube yang dipasang di posting blog akan terlihat lebih bergaya, anda hanya perlu menambahkan tag pada langkah no 4 sebagai cara untuk menggunakan VPK pada semua video diposting blog. Semoga bermanfaat, Enjoy & Happy Coding!
Dari sanalah timbul ide untuk membuat tampilan video-video yang dipasang di blogger terlihat lebih kreatif dan pro. Tentunya saya juga sangat mempertimbangkan efek kecepatan pemuatan laman agar tidak berpengaruh lelet dan tetap bersih.
Saya membuat dan menamai skin yang khusus untuk membalut video yang dipasang di posting blog dengan nama "Video Player Keren" atau VPK yang saya buat untuk pengguna google blogger dengan menggunakan murni CSS3 yang bersih dan valid. Cara kerja dari VPK ini akan menampilkan video yang anda embed menggunakan iframe dengan skin yang mirip seperti tampilan tablet lengkap dengan kamera dibagian atasnya. Silahkan lihat demonya di bawah lalu coba untuk memutar videonya.
Demo
Persiapan :
1) Salin semua kode dibawah ini:
Klik ganda untuk menyalin
/* Video Player Keren http://teach-how.blogspot.com/2013/12/cara-terbaru-memasukkan-dan-memasang-video-youtube-keren-diblog.html */
.vpk{background:#d3d3cc;border:3px solid #c5cbcc;border-radius:2.5em 2.5em 1em 1em;font-family:'Arial';color:white;font-size:12px;margin-bottom:.5em;padding:1.2em 1em 1em;text-align:justify}.vpk iframe{width:100%}.vpk object{width:100%}.vpk embed{position:absolute;top:0;left:0;width:100%;height:100%}.vpk:before{background:#6d6d66;border:1px #ebf6ff;border-radius:50%;content:"";display:inline-block;position:relative;padding:1em;z-index:1;float:right;margin-right:50%;margin-bottom:5px}.vpk:after{background:#6d6d66;border:2px #ebf6ff;border-radius:0 0 1em 1em;content:"Video Player Keren (VPK)";display:block;position:relative;padding:1em}
2) Masuk ke Blogger lalu klik Template
3) Lakukan Back Up lalu klik Edit HTML
4) Cari kode ]]></b:skin> lalu pastekan semua kode tersebut tepat diatasnya.
Langkah-langkah (penerapan) :
1) Masuk ke Blogger lalu klik New Post
2) Klik Mode HTML (disamping mode Compose)
3) Cari video yang ingin anda embed dalam format iframe
4) Tempatkan Tag section dibawah ini pada mode HTML diantara kode iframe video yang di embed. Misal
Klik ganda untuk menyalin
<div class="vpk">
iframe dibawah adalah video yang ingin ditampilkan menggunakan VPK.
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/ID VIDEO EMBED ANDA" width="420"></iframe>
</div>
5) Klik Pratinjau lalu Publikasikan
Sekarang tampilan baru dari video youtube yang dipasang di posting blog akan terlihat lebih bergaya, anda hanya perlu menambahkan tag pada langkah no 4 sebagai cara untuk menggunakan VPK pada semua video diposting blog. Semoga bermanfaat, Enjoy & Happy Coding!
Komentar