Youtube!!! No Iframe, Yes SEO

Selamat Malam sobat blogger,,

Ketemu lagi di blognya Mas Yoga. semoga sobat tetap setia membaca artikel di blognya Mas Yoga ini :)
begini sobat, pernahkah sobat membuat video youtube di blog? bagaimana kelihatannya? bagus sih?? tapi coba cek di chkme.com, dan lihat di menu Frames and Iframe usage,, coba lihat apakah pada iframes muncul Bad,, sedangkan kalau good. berarti baik-baik saja dengan blog sobat :)

Terus bagaimana ya?? cara mengatasinya? supaya nggak mengurangi SEO blog?? gampang kok,, video youtube diblog sobat hapus aja,, karena video youtube menggunakan kode iframe yang mengganggu SEO blog sobat blogger.
kalau di hapus?? nanti kan nggak ada videonya?? jadi pusing tujuh keliling deh :D
Tenang saja sobat blogger,, di sini Mas Yoga akan membantu sobat. yaitu "Cara membuat video youtube responsive di blog", tutorial ini tidak menggunakan iframe, dijamin 100%. dan langsung kode html asli, hehehe :D

Yuk di simak tutorialnya, yang teliti ya ;)

1. Pasti sudah jelas dong sobat,, masuk ke dashboard blogger sobat
2. Pada Menu template, klik edit html. maka akan muncul semua script-script blog template sobat.
3. Cari kode ]]></b:skin>, lebih mudahnya tekan CTRL + F,, lalu tekan enter. setelah itu copy pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

diatas kode /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}

4. Setelah kode di atas sudah terpasang, masukkan kode di bawah ini tepat di atas kode </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> pasang kode <div class="videoyoutube"><div class="video-responsive"><div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI"></div></div></div>

Jangan lupa setelah selesai, klik simpan template :)

5. Jika sudah kode semua sudah terpasang,,, masuk ke dalam ke menu post sobat,, lalu edit post blogger sobat.
tambahkan kode di bawah ini di mode HTML

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

KET ;
SIMPAN-LINK-EMBED-VIDEO-DI-SINI, font yang bertuliskan itu, Masukkan kode link embed youtube sobat,,, ingat sobat, cuman link youtube-nya saja :)

6. Setelah itu perbarui post sobat,, dan lihat sendiri hasilnya. jika berhasil akan muncul tampilan seperti ini ;

=> jika nanti pas sobat memasang, namun ukuran video tidak pas dengan templatenya. tambahkan kode CSS di bawah ini ;), taruh di atas kode ]]></b:skin> pada edit template sobat blogger

/* 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}}

Dengan kode di atas sobat bisa merubah ukuran-ukuran video youtube sobat :),,,

bagaimana mudahkan tutorialnya?? tinggal copy paste sudah selesai :D :D :D

Yah,, mungkin cukup untuk pertemuan hari ini, mudah-mudahan tutorial ini dapat bermanfaat buat sobat dan pastinya menambah SEO blog sobat :),,, jika ada pertanyaan silahkan tulis di kotak komentar.

Mohon maaf jika ada kesalahan dalam penulisan kata. Pengunjung yang baik adalah setiap membaca artikel meninggalkan sebuah komentar yang baik :)

Sampai Jumpa