Saya akan berpendapat bahwa anda ingin memasukkan dan memasang beberapa video youtube didalam gadget blogspot tapi anda tidak mau kehilangan ruang atau terlihat berantakan. Untuk itu kali ini saya bikin widget youtube player slider yang sanggup mengurangi ruang didalam bagian blog dan pastinya dengan performa yang lebih bergaya.
Anda sanggup memasukkan atau embed video favorit ataupun video langsung untuk ditampilkan didalam widget dengan memakai fitur slider dasar murni CSS3 yang berfungsi untuk mengurangi ruang dan design yang lebih kreatif. Disini saya cuma bikin slider untuk 4 video saja tapi jikalau anda mengenali dasar ihwal CSS dan HTML anda sanggup menambahnya lebih banyak dan buatlah lebih kreatif.
1) Salin kode dibawah ini kedalam kesibukan notepad atau kesibukan sejenisnya
Contoh :
1) Masuk ke dasbor akun blogger anda lalu klik Tata Letak
2) Klik Tambah Gadget lalu klik HTML/JavaScript
3) Pastekan semua kode yang sudah disalin dari kesibukan 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 sanggup mengurangi ruang blog. Semoga terinspirasi, Kudos and Happy Coding!
Sumber https://henponterbaru.blogspot.com

Anda sanggup memasukkan atau embed video favorit ataupun video langsung untuk ditampilkan didalam widget dengan memakai fitur slider dasar murni CSS3 yang berfungsi untuk mengurangi ruang dan design yang lebih kreatif. Disini saya cuma bikin slider untuk 4 video saja tapi jikalau anda mengenali dasar ihwal CSS dan HTML anda sanggup menambahnya lebih banyak dan buatlah lebih kreatif.
Persiapan :
1) Salin kode dibawah ini kedalam kesibukan notepad atau kesibukan sejenisnya
Klik ganda untuk menyalin
2) Ganti semua URL ID video didalam kode tersebut dengan url ID video milik anda <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>
Contoh :
http://www.youtube.com/embed/9No-FiEInLAGanti dengan :
http://www.youtube.com/embed/ID-VideoSaya3) Jika anda sudah mengubah URL video lalu salin kembali semua kode 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 kode yang sudah disalin dari kesibukan 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 sanggup mengurangi ruang blog. Semoga terinspirasi, Kudos and Happy Coding!