TeknoPlace.Com - Mode responsive sangat dibutuhkan didunia web desain dengan berbagai macam platform bahkan seperti blogger sekalipun. Apa yang di maksud dengan responsive , bila anda tidak mengetahui akan kami informasikan bahwa responsive adalah mode otomatis untuk memperkecil sebuah halaman website agar dapat di akses dengan perangkat yang lebih kecil seperti smartphone n tablet jadi lalu lintas pengguna yang mengakses ke mobile version akan lebih nyaman karena suatu konten dapat terbaca dengan jelas bahkan menarik.
Google pun beberapa waktu lalu telah mensyaratkan agar website atau blog harus ramah dengan akses mobile sehingga para pemilik website atau blog akan mendapatkan traffik pengunjung yang lebih banyak dibanding desktop mengingat saat ini 60% lalu lintas website di akses pengguna melalui mobile.

Mode diatas adalah contoh suatu website atau blog menggunakan video youtube dalam mode responsive sehingga nyaman untuk dilihat. Lalu bagaimana kalau tidak di buat secara responsive? Jawabannya adalah maka tampilan video youtube yang diakses melalui perngkat mobile akan terpotong dan tidak tampil dengan penuh. Jadi akan membuat pengunjung tidak nyaman. Bagaimana caranya agar tampil secara reponsive? Sebagai berikut Langkah langkah nya didalam platform Blogger :
Tambahkan code javascript jquery
Tambahkan kode dibawah ini dan taruh di atas kode </head> ( Kode bisa dilihat disini )
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Edit Skin
Edit bagian skin dengan cari kode /]]></b:skin> dan taruh kode dibawah ini diatas kode /]]></b:skin> ( Kode bisa dilihat disini )
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Posting Pos dalam Mode html
Posting post dalam mode html dan sematkan kode ini setiap ingin menyematkan video youtube di postingan blog. ( Kode bisa dilihat di sini )
<div class="video-container">
         <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>
Ganti Link Embed Youtube
Ganti Link Youtube http://www.youtube.com/embed/dFVxGRekRSg dengan kode embed yang anda dapatkan dari Youtube. Untuk mencari kode embed di youtube anda tinggal buka video yang diinginkan , pilih share dan pilih Embed . kemudian salin link video embed nya. Selesai


Poskan Komentar Blogger

 
Top