Site and learn your application

Jumat, 30 Oktober 2015

Cara Membuat Tampilan Video Youtube Responsive di Blogger (Work)

Indo Amaterasu
Update terbaru dari Google sekaligus pemilik mesin pencari dan blog blogger mengharuskan menggunakan template blog responsive. Dalam notifikasinya menggunakan template blog responsive mempengarui model pencarian mobile. Jadi sudah jelas bahwa Google menginginkan menggunakan template responsive untuk meningkatkan SEO blog mobile.

Template blog responsiver artinya tampilan blog tersebut dapat dibuka disemua device seperti komputer, smartphone, dan tablet, namun tampilannya menyesuaikan ukuran layar device yang digunakan disebut responsive. Kategori yang harus dibuat responsive adalah tampilan halaman blog itu sendiri, tampilan gambar, dan tampilan video bila Ada melengkapi postingan dengan video Youtube.

Postingan ini merupakan kelanjutan dari artikel sebelumnya yaitu Cara Mengubah Template Bawaan Blogger Menjadi Responsive dan Cara Membuat Gambar Postingan Blog Responsive. Selengkapnya silahka baca pada link berikut ini:
  1. Cara Mengubah Template Bawaan Blogger Menjadi Responsive
  2. Cara Membuat Gambar Postingan Blog Responsive
Nah.. untuk membuat tampilan video Youtube yang dipasang pada blogger menjadi responsive, silahkan simak caranya berikut ini.

Contoh video Youtube belum responsive dan responsive
Video Youtube belum responsive

Video Youtube responsive
Video Youtube responsive

Cara Membuat Tampilan Video Youtube Responsive di Blogger (Work):

1. Copy kode di bawah ini dan paste di atas kode ]]></b:skin> pada template blogger. Untuk mempercepat pencarian gunakan Ctrl+F
.embed-box {
position: relative;
padding-bottom: 62.25%; /* ratio for youtube embed */
padding-top: 30px;
height: auto;
overflow: hidden;
}
.embed-box iframe,
.embed-box object,
.embed-box embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
2. Save template
3. Langkah selanjutnya masukkan kode embed video youtube menggunakan format kode berikut ini setiap kali Anda ingin menambahkan video pada postingan.
<div class="embed-box">Letakkan kode embed video Youtube di sini</div>

Cara Mendapatkan Kode Embed Video Youtube
Buka video Youtube yang ingin disipkan dalam postingan blog. Kemudian pilih Share > Embed Video. Copy kode Embed dan masukkan dalam postingan artikel menggunakan format vide responsive di atas.

0 komentar:

Poskan Komentar

= > Silahkan berkomentar sesuai artikel di atas
= > Berkomentar dengan url (mati/ hidup) tidak akan dipublish