Mengdisable tampilan Mobile
Alasan dibuat template menjadi responsive adalah karena blogger tidak mengijinkan template khusus untuk mobile, kecuali = buatan mereka sendiri ( dari pihak blogger )sendiri.Jadi, pertama-tama kita harus mengdisable dulu tampilan mobilenya.
1. Buka blogger > Template > Seluler
2. Pilih,
Tidak. Tampilkan template seluler di perangkat seluler,
Bukan
Ya. Tampilkan template seluler di perangkat seluler.
Memasang Meta Tag
Terlebih dahulu kita pasang Meta Tag.
1. Buka blogger > edit HTML
2. Masukkan Meta tag berikut dibawah <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
Menggunakan CSS3 Media Queries
Media Queries dapat mengetahui ukuran layar digunakan. Kegunaannya Media Queries hampir sama dengan IF. Misalnya kita buat contoh Media Queries untuk HP dan Tablet.
@media screen and (max-width : 480px) { /* Jika ukuran layar digunakan dibawah 480px ( maskimal 480px )*/ /* Apa yang harus dilakukan*/ } @media screen and (max-width : 768px) { /* Jika ukuran layar digunakan dibawah 768px ( maksimal 768px ) */ /* Apa yang harus dilakukan */ }
Apa yang harus diingat
Gunakan pixel ( px ) untuk mendefinisikan ukurannya
Gunakan 3 ukuran yiatu 480px/768px/1024px ( Rekomendasi ) atau 240px/320px/480px/768px/1024px ( Lebih baik tapi ribet nanti mengkostuminasinya.
Home