Cara Membuat Custom Thumbnail Youtube di Postingan

10/27/2014
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://arlinadesign.blogspot.com/2014/10/cara-membuat-custom-thumbnail-youtube-di-postingan.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

22 comments

pastinya resposnive ya sis,, boleh nih diotak atik lagi :D

Balas

iya silahkan mas

Balas

Pertamax Udah diambil sama MAz Mawan :(
tapi engga apa2 deh =D

ini hanya untuk thumbnail video aja ya mbak ?
kalo untuk post bisa engga mbak ?

Balas

thanks Arlina Fitriyani :)

Balas

Could you please implement this to the Lycoris version 1, 1.1, 1.1 alt and 2 to make them multipurpose templates. India love multipurpose blogger template.

Balas

I already implement this trick to Lycoris 2 template, you just have to call with HTML code above to the post

Balas

caranya sudah dijelaskan di atas

Balas

Saya Request dong Cara membuat button View image, Thank's

Balas

button view image itu seperti apa?

Balas

Mbak arliana pinter banget sih.. saya kepincut bingit nih... =)D

Balas

hehe, biasa aj ko mas

Balas

kren mbak arlina,,, jarang-jarang loh cewek pinter ngeblog. ops out topic,,, di coba dulu mbak yaa. keep posting :D

Balas

iseng aja ko mas, ok siap

Balas

OOT. Bisa PM ngga Mba? Pake Apa Aja.

Balas

maksudnya pake apanya ya?

Balas

mbak apa nggak bisa selain youtube >

Balas

ohh saya ingin tanya bagaimana cara menyembunyikan gambar postingan di blog contoh nya seperti website streaming seperti animeindo

Saya mempunyai template yang dapat menyembunyikan gambar dalam postingan blog saya tetap ketika saya mengganti template malah sering error

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.