Cara Membuat Youtube Player Keren Di Widget Blogger

Saya akan berasumsi bahwa anda ingin memasukkan dan memasang beberapa video youtube didalam gadget blogspot tetapi anda tidak mau kehilangan ruang atau terlihat berantakan. Untuk itu kali ini saya membuat widget youtube player slider yang mampu menghemat ruang didalam elemen blog dan tentunya dengan tampilan yang lebih bergaya.

Anda mampu memasukkan atau embed video favorit ataupun video langsung untuk ditampilkan didalam widget dengan menggunakan fitur slider dasar murni CSS3 yang berfungsi untuk menghemat ruang dan design yang lebih kreatif. Disini saya hanya membuat slider untuk 4 video saja tetapi jikalau anda mengetahui dasar perihal CSS dan HTML anda mampu menambahnya lebih banyak dan buatlah lebih kreatif.

Persiapan :

1) Salin instruksi dibawah ini kedalam acara notepad atau acara sejenisnya

Klik ganda untuk menyalin

 <style type="text/css"> #slider-wrapper{width:300px;height:300px;margin:50px auto;margin-bottom:0;background:#111B32;}#video1{padding:6px;background:#F7FAFC;position:absolute;left:50%;bottom:5px;margin-left:-36px;border-radius:20px;opacity:.3;cursor:pointer;z-index:999}#video2{padding:6px;background:#fff;position:absolute;left:50%;bottom:5px;margin-left:-12px;border-radius:20px;opacity:.3;cursor:pointer;z-index:999}#video3{padding:6px;background:#fff;position:absolute;left:50%;bottom:5px;margin-left:12px;border-radius:20px;opacity:.3;cursor:pointer;z-index:999}#video4{padding:6px;background:#fff;position:absolute;left:50%;bottom:5px;margin-left:36px;border-radius:20px;opacity:.3;cursor:pointer;z-index:999}#video1:hover,#video2:hover,#video3:hover,#video4:hover{opacity:1}.inner-wrapper{width:300px;height:300px;position:absolute;top:0;left:0;margin-bottom:0;overflow:hidden}.control{display:none}#Slide1:checked   .overflow-wrapper{margin-left:0}#Slide2:checked   .overflow-wrapper{margin-left:-100%}#Slide3:checked   .overflow-wrapper{margin-left:-200%}#Slide4:checked   .overflow-wrapper{margin-left:-300%}#Slide1:checked+#video1{opacity:1}#Slide2:checked+#video2{opacity:1}#Slide3:checked+#video3{opacity:1}#Slide4:checked+#video4{opacity:1}.overflow-wrapper{width:400%;height:100%;position:absolute;top:0;left:0;overflow-y:hidden;z-index:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slide iframe{width:25%;float:left} </style> <div id="slider-wrapper"> <div class="inner-wrapper"> <input checked type="radio" name="slide" class="control" id="Slide1"/> <label for="Slide1" id="video1"></label> <input type="radio" name="slide" class="control" id="Slide2"/> <label for="Slide2" id="video2"></label> <input type="radio" name="slide" class="control" id="Slide3"/> <label for="Slide3" id="video3"></label> <input type="radio" name="slide" class="control" id="Slide4"/> <label for="Slide4" id="video4"></label> <div class="overflow-wrapper"> <div class="slide" href=""><iframe type="text/html" width="300" height="280" src="http://www.youtube.com/embed/9No-FiEInLA?theme=light" frameborder="0"></iframe></div> <div class="slide" href=""><iframe type="text/html" width="300" height="280" src="http://www.youtube.com/embed/9No-FiEInLA?theme=light" frameborder="0"></iframe></div> <div class="slide" href=""><iframe type="text/html" width="300" height="280" src="http://www.youtube.com/embed/9No-FiEInLA?theme=light" frameborder="0"></iframe></div> <div class="slide" href=""><iframe type="text/html" width="300" height="280" src="http://www.youtube.com/embed/9No-FiEInLA?theme=light" frameborder="0"></iframe></div> </div></div></div> 

2) Ganti semua URL ID video didalam instruksi tersebut dengan url ID video milik anda
Contoh :

http://www.youtube.com/embed/9No-FiEInLA

Ganti dengan :

http://www.youtube.com/embed/ID-VideoSaya

3) Jika anda telah mengganti URL video lalu salin kembali semua instruksi tersebut

Langkah-langkah memasukkan video youtube kedalam widget :

1) Masuk ke dasbor akun blogger anda lalu klik Tata Letak

2) Klik Tambah Gadget lalu klik HTML/JavaScript

3) Pastekan semua instruksi yang telah disalin dari acara notepad kedalam widget tersebut

4) Klik Simpan

Sekarang coba anda lihat salah satu halaman blog maka video youtube anda pun tampil didalam widget dengan fitur slider yang mampu menghemat ruang blog. Semoga terinspirasi, Kudos and Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/

Share this post