Cara Menambah Thumbnail Image Video Youtube Pada Entri Posting Blog

Thumbnail Image Video Youtube adalah pengalihan thumbnail gambar asli dari sebuah video youtube yang ditempatkan pada lapisan paling depan sebuah video yang nantinya akan terlebih dahulu tampil sebelum thumbnail asli video youtube dalam entri posting blog. pada tutorial ini diterapkan dua kali klik untuk memainkan video youtube tersebut. Klik pertama menghilangkan thumbnail image, sedangkan klik yang kedua adalah memainkan video youtube.

Thumbnail Image Video Youtube di ibaratkan lapisan kulit paling luar, sedangkan thumbnail video youtube menjadi lapisan kedua dari thumbnail video youtube asli, apabila kulit pada bagian luar terkelupas maka yang akan tampil adalah kulit asli dari video tersebut. Script yang kami bagikan sudah support hingga dua puluh video youtube.

Cara meletakkan Thumbnail Image Video Youtube pada blog.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode </style> atau ]]></b:skin>.

/* Skin Design Youtube Image Thumbnail*/

.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:400px; 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:.50; height:77px; left:50%; margin-left:-38px; margin-top:-38px; position:absolute; top:50%; width:77px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifw-ewE7qVwu5YBep9DDWuzFRQQSaGoUCbgVezvKNYxNfnKFp0quka4qOYQBrRRwrOueqOqwpTCEs3fEAQ8BkzbKAOnBZZDFB7LfEi87fFQQ_geTXL9v6ZGoHbAOkiHoBAvyYu0PbZFQJc/s1600/youtuber4.png) no-repeat}

.play:hover { opacity:10; }

Letakkan kode script dibawah ini tepat diatas kode </body>.

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){ $("#play1").click(function(){ $("#remove1").hide(); $("#add1").show(); }); });
$(document).ready(function(){ $("#play2").click(function(){ $("#remove2").hide(); $("#add2").show(); }); });
$(document).ready(function(){ $("#play3").click(function(){ $("#remove3").hide(); $("#add3").show(); }); });
$(document).ready(function(){ $("#play4").click(function(){ $("#remove4").hide(); $("#add4").show(); }); });
$(document).ready(function(){ $("#play5").click(function(){ $("#remove5").hide(); $("#add5").show(); }); });
$(document).ready(function(){ $("#play6").click(function(){ $("#remove6").hide(); $("#add6").show(); }); });
$(document).ready(function(){ $("#play7").click(function(){ $("#remove7").hide(); $("#add7").show(); }); });
$(document).ready(function(){ $("#play8").click(function(){ $("#remove8").hide(); $("#add8").show(); }); });
$(document).ready(function(){ $("#play9").click(function(){ $("#remove9").hide(); $("#add9").show(); }); });
$(document).ready(function(){ $("#play10").click(function(){ $("#remove10").hide(); $("#add10").show(); }); });
$(document).ready(function(){ $("#play11").click(function(){ $("#remove11").hide(); $("#add11").show(); }); });
$(document).ready(function(){ $("#play12").click(function(){ $("#remove12").hide(); $("#add12").show(); }); });
$(document).ready(function(){ $("#play13").click(function(){ $("#remove13").hide(); $("#add13").show(); }); });
$(document).ready(function(){ $("#play14").click(function(){ $("#remove14").hide(); $("#add14").show(); }); });
$(document).ready(function(){ $("#play15").click(function(){ $("#remove15").hide(); $("#add15").show(); }); });
$(document).ready(function(){ $("#play16").click(function(){ $("#remove16").hide(); $("#add16").show(); }); });
$(document).ready(function(){ $("#play17").click(function(){ $("#remove17").hide(); $("#add17").show(); }); });
$(document).ready(function(){ $("#play18").click(function(){ $("#remove18").hide(); $("#add18").show(); }); });
$(document).ready(function(){ $("#play19").click(function(){ $("#remove19").hide(); $("#add19").show(); }); });
$(document).ready(function(){ $("#play20").click(function(){ $("#remove20").hide(); $("#add20").show(); }); });

//]]>

</script>

Letakkan kode script dibawah ini tepat diatas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Kemudian klik SAVE.

Cara memanggil CSS dan script diatas pada entri posting blog.

Masukkan kode dibawah ini pada entri posting yang akan diisi dengan video youtube.

<div class='youtube' data-id='ea66fTVuLQ4'>

<iframe id="add1" style="display:none" width="100%" height="400" src="//www.youtube.com/embed/ea66fTVuLQ4?rel=0" frameborder="0" allowfullscreen>

</iframe>

<div id="remove1">

<a href=""><img class='thumb' src="http://i.ytimg.com/vi/ea66fTVuLQ4/hqdefault.jpg"/></a>

<div class='play' id="play1">

</div>

</div>

</div>

Pada teks box merah silahkan ganti dengan kode link youtube.
Pada teks box hijau silahkan ganti dengan angka berurutan sesuai dengan urutan video yang ingin dimasukkan dalam entri posting.
Jika semua sesuai dengan tutorial diatas, silahkan klik PUBLISH.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.