Cara buat widget playlist youtube otomatis di Blog

Cara buat Widget Playlist Youtube otomatis di blog - Youtube adalah salah satu situs ternama yang ada di dunia, yang berfungsi sebagai penyedia layanan gratis upload video. nah kali ini hatiku mata akan sharing cara menampilkan video yang kalian miliki di youtube bisa tampil di blog kalian. Simak dan praktekan tutorial yang akan hatiku mata bagikan di bawah ini. Dalam membuat widget youtube di blogspot sebenarnya cukup mudah dan gampang jika kalian mau mencobanya, nah untuk mencobanya kalian harus melakukan beberapa cara yang akan hatiku mata sampaikan di bawah ini.

Cara buat widget playlist youtube otomatis  di blog

• Buka Akun Blogspot kalian.
• Pilih "Tata Letak" 
• Setelah itu kalian pilih dimana akan di tempatkan widget nya , pilih "Tambah Gedget" Lalu pilih "Html / JavaScript"

• Kemudian akan keluar tampilan Form , Copy dan Pastekan Kode berikut di Form tersebut.

<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/tg8YqvKe4TY?theme=light" frameborder="0"></iframe></div>

<div class="slide" href=""><iframe type="text/html" width="300" height="280" src="http://www.youtube.com/embed/4o-XO2_xKDI?theme=light" frameborder="0"></iframe></div>

<div class="slide" href=""><iframe type="text/html" width="300" height="280" src="http://www.youtube.com/embed/nJqmUnYEqvw?theme=light" frameborder="0"></iframe></div>

<div class="slide" href=""><iframe type="text/html" width="300" height="280" src="http://www.youtube.com/embed/D0sNSVUvX-s?theme=light" frameborder="0"></iframe></div>

</div></div></div>

Note : -  Masukan Link Video embed youtube anda di kolom yang diberi warnah merah

           -  Total video di widget playlist tersebut berjumlah 4

Demikian lah cara buat widget youtube di blog semoga dapat bermanfaat bagi kalian semua yang membacanya, Dan jangan lupa Share dan Berkomentar jika anda masih Bingung, Hatiku mata siap melayani pertanyaan sobat semua di sini.