Cara Membuat Custom Thumbnail Youtube di Postingan - Kali ini aku akan menyebarkan tips sederhana cara menciptakan custom thumbnail video youtube memakai CSS, jQuery, dan HTML.
Pertama login ke Blogger > Buka Template > Edit HTML
Salin dan terapkan arahan 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 arahan 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 arahan pemanggil di bawah ini di dalam postingan Tab HTML
<div class='youtube' data-id='mbPO4FPAX1Y'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/mbPO4FPAX1Y?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=mbPO4FPAX1Y"><img class='thumb' src="http://i.ytimg.com/vi/mbPO4FPAX1Y/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>Ubah semua arahan video youtube ini mbPO4FPAX1Y dengan arahan video yang anda inginkan.
Misal link video youtube ibarat ini
https://www.youtube.com/watch?v=mbPO4FPAX1Y
Salin arahan yang ditandai ke dalam arahan HTML diatas.
Jika ingin memunculkan autoplay pada videonya, silahkan tambahkan autoplay=1 dibelakang link youtube nya
https://www.youtube.com/watch?v=mbPO4FPAX1Y ?autoplay=1
Dengan trik ini pun gambar dari link video youtube akan muncul di post halaman utama blog anda.
Catatan : Bagi anda yang memakai template Lycoris 2 cukup terapkan arahan HTMLnya saja ke dalam postingan, alasannya yaitu untuk arahan lainnya sudah aku terapkan.
Semoga bermanfaat.
Source :