Cara Membuat Custom Thumbnail Youtube di Postingan Blogger
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"
Posting Komentar