Dewa Blogger: Hasil penelusuran untuk cara-membuat-custom-thumbnail-youtube-di-postingan

Halaman

    Social Items

Home / Hasil penelusuran untuk cara-membuat-custom-thumbnail-youtube-di-postingan
Cara Membuat Custom Thumbnail Youtube di Postingan Cara Membuat Custom Thumbnail Youtube di Postingan

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

Pertama login ke Blogger > Buka Template > Edit HTML

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

Misal link video youtube ibarat ini

https://www.youtube.com/watch?v=mbPO4FPAX1Y
Salin arahan yang ditandai ke dalam arahan 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 memakai template Lycoris 2 cukup terapkan arahan HTMLnya saja ke dalam postingan, alasannya yaitu untuk arahan lainnya sudah aku terapkan.

Semoga bermanfaat.

Source :

Cara Menciptakan Custom Thumbnail Youtube Di Postingan

Cara Terbaru Memasang Video Youtube Responsive di Blog Cara Terbaru Memasang Video Youtube Responsive di Blog

Cara Terbaru Memasang Video Youtube Responsive di Blog - Youtube yaitu sebuah situs video membuatkan paling terkenal ketika ini yang dimana teman sanggup mengupload video, menonton video, atau sanggup juga untuk mendapat penghasilan dari youtube dengan mendaftarkan akun adsense melalui youtube.

Banyak kelebihan yang ditawarkan situs youtube ini, salah satunya yaitu fitur embed video yang sanggup teman tambahkan dan sanggup ditonton pribadi di blog. Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog alasannya yaitu adanya elemen iframe dan tampilannya pun belum responsive kalau ukuran layar diperkecil.

Baca juga : Cara Membuat Custom Thumbnail Youtube di Postingan

Maka dari itu di sini menunjukkan sebuah trik semoga video youtube menjadi responsive dan tidak akan mengurangi nilai SEO blog sobat. Berikut cara penerapannya :

1. Buka Blogger > Template > Edit HTML > Tambahkan isyarat di bawah ini sebelum ]]></b:skin> atau </style>

/* Youtube Responsive */ .videoyoutube{text-align:center;margin:auto;width:100%;} .video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;} .video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2. Tambahkan isyarat di bawah ini sebelum </body>

<script type='text/javascript'> //<![CDATA[ // Youtube Responsive setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3); //]]> </script>

3. Simpan template.

4. Selanjutnya untuk menambahkan video pada postingan, gunakan isyarat di bawah ini :

<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI"> </div> </div> </div>

Contoh link embed video yang diambil :

Cara Terbaru Memasang Video Youtube Responsive di Blog Cara Terbaru Memasang Video Youtube Responsive di Blog

Salin link embed ibarat screenshot di atas, kemudian simpan di dalam isyarat HTML di atas ibarat ini :

lt;div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="//www.youtube.com/embed/31k_DB8KVQM"> </div> </div> </div>

5. Terakhir simpan / publikasikan postingan.

Update : CSS Only


Saya mendapat wangsit dari komentar teman duniavern untuk mengakali embed video youtube menjadi responsive hanya dengan CSS. Bagi yang ingin mengganti hanya dengan menambahkan CSS saja, teman sanggup pasang isyarat di bawah ini :

/* CSS Only */ .post-body iframe{width:100%!important;} @media screen and (max-width:960px){ .post-body iframe{max-height:90%}} @media screen and (max-width:768px){ .post-body iframe{max-height:75%}} @media screen and (max-width:600px){ .post-body iframe{max-height:60%}} @media screen and (max-width:480px){ .post-body iframe{height:auto!important;max-height:auto!important}}

Atur kembali CSS max-height dalam media query kalau kurang sesuai.


Kini video youtube yang diembed di postingan sudah responsive yang berarti video sanggup menyesuaikan dengan ukuran dalam layar apapun. Sekian sedikit trik wacana Cara Terbaru Memasang Video Youtube Responsive di Blog. Mudah-mudahan bermanfaat bagi teman blogger semua. Terima kasih.

Cara Terbaru Memasang Video Youtube Responsive Di Blog

Langganan: Komentar (Atom)