Cara Memasang Video Youtube Responsive Di Blog
Cara Memasang Video Youtube Responsive di Blog - Kali ini saya akan memposting yang berkaitan dengan koding yaitu bagaimana Cara Memasang Video Youtube Responsive di Blog , mengapa harus Responsive? alasannya ialah Responsive akan mengubah tampilan video yang diembed menjadi tampilan yang menyesuaikan dan dengan memakai responsive ini Nilai SEO blog anda tidak akan berkurang .
Youtube merupakan sebuah situs video mengembangkan paling terkenal dikala ini, yang dimana anda sanggup mengupload video, menonton video, atau sanggup juga untuk mendapat penghasilan dari youtube dengan mendaftarkan Akun Google Adsense melalui youtube.
Sangat banyak kelebihan yang ditawarkan situs youtube ini, yaitu salah satunya ialah fitur embed video yang sanggup anda tambahkan dan sanggup ditonton eksklusif di blog. Tetapi dengan menambah video tersebut akan mengurangi Nilai SEO sebuah blog alasannya ialah adanya elemen IFrame dan tampilannya pun belum responsive jikalau ukuran layar diperkecil.
Maka dari itu saya selaku penulis blog akan memperlihatkan trik biar video youtube menjadi responsive dan tidak akan mengurangi Nilai Seo blog anda. Berikut ialah langkah-langkah Cara Memasang Video Youtube Responsive di Blog .
1. Hal pertama yang harus anda lakukan ialah Membuka Dashboard Blog kalian masing-masing > Lalu klik Menu Tema > Dilanjutkan dengan Edit HTML > Lalu tambahkan instruksi CSS berikut ini dan letakkan di atas </style> atau ]]></b:skin> .
2. Tambahkan instruksi Javascript di bawah ini sebelum </body> .
3. Setelah instruksi diatas terpasang dengan benar silahkan Simpan Template .
4. Selanjutnya untuk menambah video pada postingan, gunakan instruksi html berikut ini.
Contoh instruksi iframe video youtube sebagai berikut.
Lalu Anda Salin link embed menyerupai instruksi di atas, kemudian simpan di dalam instruksi HTML di atas menyerupai ini :
5. Terakhir simpan postingan dan lihat kesannya untuk demo Responsive Youtube Video ada dibawah.
Kesimpulan jadi Cara Memasang Video Youtube Responsive di Blog sangat gampang dilakukan, cukup dengan menambahkan instruksi HTML,JAVASCRIPT dan CSS , yang ada diatas maka tampilan Video Youtube yang di Embed akan tampil responsive dan tanpa mengurani Nilai SEO.
Mungkin cukup sekian tutorial bagaimana Cara Memasang Video Youtube Responsive di Blog , semoga tutorial diatas sanggup bermanfaat dan menjadi materi pembelajaran khususnya bagi para blogger. Apabila tutorial diatas kurang paham silahkan tanyakan lewat berkomentar dibawah postingan ini terima kasih.
Youtube merupakan sebuah situs video mengembangkan paling terkenal dikala ini, yang dimana anda sanggup mengupload video, menonton video, atau sanggup juga untuk mendapat penghasilan dari youtube dengan mendaftarkan Akun Google Adsense melalui youtube.
Sangat banyak kelebihan yang ditawarkan situs youtube ini, yaitu salah satunya ialah fitur embed video yang sanggup anda tambahkan dan sanggup ditonton eksklusif di blog. Tetapi dengan menambah video tersebut akan mengurangi Nilai SEO sebuah blog alasannya ialah adanya elemen IFrame dan tampilannya pun belum responsive jikalau ukuran layar diperkecil.
Maka dari itu saya selaku penulis blog akan memperlihatkan trik biar video youtube menjadi responsive dan tidak akan mengurangi Nilai Seo blog anda. Berikut ialah langkah-langkah Cara Memasang Video Youtube Responsive di Blog .
Memasang Video Youtube Responsive di Blog
1. Hal pertama yang harus anda lakukan ialah Membuka Dashboard Blog kalian masing-masing > Lalu klik Menu Tema > Dilanjutkan dengan Edit HTML > Lalu tambahkan instruksi CSS berikut ini dan letakkan di atas </style> atau ]]></b:skin> .
/* 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 instruksi Javascript 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. Setelah instruksi diatas terpasang dengan benar silahkan Simpan Template .
4. Selanjutnya untuk menambah video pada postingan, gunakan instruksi html berikut 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 instruksi iframe video youtube sebagai berikut.
<iframe width="640" height="360" src="https://www.youtube.com/embed/nfs8NYg7yQM" frameborder="0" gesture="media" allowfullscreen></iframe>
Lalu Anda Salin link embed menyerupai instruksi di atas, kemudian simpan di dalam instruksi HTML di atas menyerupai ini :
<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="//www.youtube.com/embed/nfs8NYg7yQM"> </div> </div> </div> 5. Terakhir simpan postingan dan lihat kesannya untuk demo Responsive Youtube Video ada dibawah.
Kesimpulan
Kesimpulan jadi Cara Memasang Video Youtube Responsive di Blog sangat gampang dilakukan, cukup dengan menambahkan instruksi HTML,JAVASCRIPT dan CSS , yang ada diatas maka tampilan Video Youtube yang di Embed akan tampil responsive dan tanpa mengurani Nilai SEO.
Mungkin cukup sekian tutorial bagaimana Cara Memasang Video Youtube Responsive di Blog , semoga tutorial diatas sanggup bermanfaat dan menjadi materi pembelajaran khususnya bagi para blogger. Apabila tutorial diatas kurang paham silahkan tanyakan lewat berkomentar dibawah postingan ini terima kasih.