Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Custom Thumbnail Youtube di Postingan Blogger

Cara Membuat Custom Thumbnail Youtube di Postingan Blogger

Pada kesempatan kali ini Sudar Code akan share tutorial Cara Custom Thumbnail video Youtube Menggunakan CSS, Jquery dan HTML. 


Pertama login ke Blogger > Buka Template > Edit HTML

Salin dan terapkan kode di bawah ini sebelum  </style>

.youtubeBorder{background:none repeat scroll 0 0 #fff;border:1px solid #e0e0e0;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:10px 0 20px;padding:4px}
.youtubeBorder p.post-video{margin:0!important}
.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer;height:330px;width:100%}
.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto;opacity:.8}
.youtube .play{opacity:.9;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;background:url(http://1.bp.blogspot.com/-UxHkp1GZmYI/VEpXsS2YAeI/AAAAAAAAHH0/kgw4wjcrOvw/s1600/play.png) no-repeat}
.play:hover{opacity:1}

Kemudian Salin dan terapkan kode di bawah ini sebelum </body>

<script>
$(document).ready(function(){
  $("#play").click(function(){
    $("#remove").hide();
    $("#add").show();
  });
});
</script>

Simpan template.

Cara penerapan di postingan

Buat postingan > Terapkan kode pemanggil di bawah ini di dalam postingan Tab HTML

<div  class='youtube' data-id='vX2vsvdq8nw'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/vX2vsvdq8nw?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=vX2vsvdq8nw"><img class='thumb' src="http://i.ytimg.com/vi/vX2vsvdq8nw/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>

Ubah semua kode video youtube ini vX2vsvdq8nw dengan kode video yang anda inginkan.

Misal link video youtube seperti ini

https://www.youtube.com/watch?v=vX2vsvdq8nw
Salin kode yang ditandai ke dalam kode HTML diatas.

Jika ingin memunculkan autoplay pada videonya, silahkan tambahkan  autoplay=1 dibelakang link youtube nya

https://www.youtube.com/watch?v=vX2vsvdq8nw ?autoplay=1


Dengan trik ini pun gambar dari link video youtube akan muncul di post halaman utama blog anda.

Semoga bermanfaat.

Posting Komentar untuk "Cara Membuat Custom Thumbnail Youtube di Postingan Blogger"