11/15/2017

Cara Memasang Video Youtube di Blog

Tags



Cara Memasang Video Youtube di Blog - Halo sobat portalblogspot, dalam kesempatan kali ini saya akan membahas bagaimana cara memasang video youtube di blog sebagai pelengkap setiap artikel yang telah dibuat. Blog yang banyak membahas tentang tutorial, musik, dan lain sebagainya dapat didukung dengan video. Sehingga untuk dapat memasukkan video disetiap postingan tidak perlu lagi aploud yang membutuhkan waktu dan memakan paket internet yang mahal.

Untuk dapat memasang video youtube anda dapat menggunakan cara yang mudah yaitu dengan mengambil kode script yang telah disediakan. Namun terkadang beberapa blogger belum tahu apakah video yang telah terpasang akan dapat terlihat dengan baik di smartphone atau responsive.

Cara Memasang Video Youtube di Blog


Baca: Cara Memasang Youtube Subcribe Button di Blog.

Lalu bagaimana cara memasang video youtube di blog menjadi responsive dan tidak mengurangi SEO blog itu sendiri. Berikut langkah-langkahnya.

Cara Memasang Video Youtube di Blog


1. Buka akun Blogger > Template > Edit HTML kemudian tambahakan kode css dibawah 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. Jangan lupa tambahkan kode javascript dibawah 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. Kemudian jika anda ingin menambahkan video di postingan jangan lupa memasang kode dibawah ini.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="LINK-EMBED-VIDEO-YOUTUBE-DI-SINI">
</div>
</div>
</div>

Sampai disini anda telah berhasil memasukkan dan memasang video youtube di blog, tetapi yang menjadi pertanyaan adalah apakah video tersebut sudah responsive atau belum? Jawabanya adalah sudah dan video anda dapat terlihat dengan baik di desktop maupun smartphone. Sebagai contoh seperti video dibawah ini.


Demikian Cara Memasang Video Youtube di Blog, semoga dengan adanya tutorial ini dapat menambah pengetahuan anda dalam dunia modifikasi blog, dan dapat melengkapi setiap postingan blog dengan video.

Portal Blogspot.
EmoticonEmoticon