Cara Membuat Custom Thumbnail Youtube di Postingan Blog

Cara Membuat Custom Thumbnail Youtube di Postingan Blog - Selamat pagi sobat irhamantap semua, oke kali ini Saya akan memberikan sedikit tips untuk sobat yang sangat berguna jika blog sobat menggunakan postingan ditambah video, yups bener banget thumbnail youtube menggunakan CSS, jQuery dan HTML.

Oke berikut cara penerapannya :

Memasang Thumbnail Youtube di Blog

1. Pertama login ke Blogger > Dashboard > Template > Edit HTML.
2. Salin/Copy kode CSS dibawah ini dan tempel/pastekan tepat diatas kode ]]></b:skin> atau </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;
}

3. Kemudian Salin/Copy kode jQuery dibawah ini, dan tempel/pastek tepat diatas kode </body>

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

4. Simpan/Save Template.

Cara Penerapan Pada Blog

Buat postingan> masukan kode HTML dibawah ini pada tab HTML bukan Compose

<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>

Silahkan sobat sesuaikan :

1. Ubah semua kode video youtube irhamantap dengan kode video yang sobat inginkan.

Contoh :

https://www.youtube.com/watch?v= irhamantap

Salin kode yang ditandai kedalam kode HTML diatas.

Jika ingin memunculkan autoplay pada videonya, silahkan tambahkan autoplay=1 dibelakan link youtube-nya.

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

Dengan trik ini pun gambar dari link video youtube akan muncul di post halaman utama blog sobat. Oke sekian tips untuk weekend ini, Semoga bermanfaat.

Source : http://arlinadesign.blogspot.com/2014/10/cara-membuat-custom-thumbnail-youtube-di-postingan.html

http://www.irhamantap.my.id/2015/07/cara-membuat-custom-thumbnail-youtube-di-postingan-blog.html

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Irham Satriawan

Mencoba untuk berkarya dan berbagi pengalaman seputar tips dan trik blogger 

Artikel Menarik Lainnya