Cara Membuat Custom Thumbnail Youtube di Postingan - Arlina Design
Cara Membuat Custom Thumbnail Youtube di Postingan

Cara Membuat Custom Thumbnail Youtube di Postingan - Kali ini saya akan berbagi tips sederhana cara membuat custom thumbnail video youtube menggunakan CSS, jQuery, dan HTML.

Pertama login ke Blogger > Buka Template > Edit HTML

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='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 kode video youtube ini mbPO4FPAX1Y dengan kode video yang anda inginkan.

Misal link video youtube seperti ini

https://www.youtube.com/watch?v=mbPO4FPAX1Y
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=mbPO4FPAX1Y ?autoplay=1


Dengan trik ini pun gambar dari link video youtube akan muncul di post halaman utama blog anda.

Catatan : Bagi anda yang menggunakan template Lycoris 2 cukup terapkan kode HTMLnya saja ke dalam postingan, karena untuk kode lainnya sudah saya terapkan.

Semoga bermanfaat.

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

Cara Membuat Custom Thumbnail Youtube di Postingan

waktuqq
Cara Membuat Custom Thumbnail Youtube di Postingan

Cara Membuat Custom Thumbnail Youtube di Postingan - Kali ini saya akan berbagi tips sederhana cara membuat custom thumbnail video youtube menggunakan CSS, jQuery, dan HTML.

Pertama login ke Blogger > Buka Template > Edit HTML

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='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 kode video youtube ini mbPO4FPAX1Y dengan kode video yang anda inginkan.

Misal link video youtube seperti ini

https://www.youtube.com/watch?v=mbPO4FPAX1Y
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=mbPO4FPAX1Y ?autoplay=1


Dengan trik ini pun gambar dari link video youtube akan muncul di post halaman utama blog anda.

Catatan : Bagi anda yang menggunakan template Lycoris 2 cukup terapkan kode HTMLnya saja ke dalam postingan, karena untuk kode lainnya sudah saya terapkan.

Semoga bermanfaat.

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

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo