Cara Menciptakan Custom Thumbnail Youtube Di Postingan

Cara Membuat Custom Thumbnail Youtube di Postingan - Kali ini aku akan membuatkan tips sederhana cara menciptakan custom thumbnail video youtube memakai CSS, jQuery, dan HTML.

Pertama login ke Blogger > Buka Template > Edit HTML

Salin dan terapkan aba-aba 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 aba-aba 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 aba-aba 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 aba-aba video youtube ini mbPO4FPAX1Y dengan aba-aba video yang anda inginkan.

Misal link video youtube menyerupai ini

https://www.youtube.com/watch?v=mbPO4FPAX1Y
Salin aba-aba yang ditandai ke dalam aba-aba 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

Result

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 aba-aba HTMLnya saja ke dalam postingan, alasannya untuk aba-aba lainnya sudah aku terapkan.

Semoga bermanfaat.

Source :

Tweet

Subscribe to receive free email updates: