cara agar template kita responsive- membuat template responsive memang sudah menjadi kewajiban seorang blogger,apalagi di era serba smartphone dan android ini.jika template kita kurang responsive maka tampilan blog kita di android akan berbeda ketika blog tampil di pc atau laptop.
sebenarnya membuat template responsive itu sendiri cukup mudah ,jika tahu caranya,karena tampilan blog kita di pc/laptop akan berbeda jika tampil di smartphone/android. terus bagaimana dong caranya agar tampilan blog kita bisa tampil sesuai dengan layar smartphone atau android? brikut ini adalah langkah demi langkah yang harus anda kuasai.
Letakkan kode dibawah ini tepat dibawah kode <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'/>
Untuk Kode CSSnya:
@media screen and (max-width:1024px) {
kode css
}
Kode diatas adalah sebuah kode responsive dimana akan bekerja dengan lebar browse sampai dengan 1041px,misal untuk membuat lebar sebuah Halaman Postingan maka kodenya seperti berikut ini
@media screen and (max-width:1024px) {
.main-wrapper{width:600px}
}
Sekarang kita akan menambahkan sebuah sidebar dengan ukuran 300px,maka kodenya seperti berikut:
@media screen and (max-width:1024px) {
.main-wrapper{width:600px}
.sidebar{300px}
}
Untuk membuat Responsive di lebar 300px maka anda akan menggukan kode seperti dibawah:
@media screen and (max-width:300px) {
kode css
}
Ukuran blog dalam px sangat kuno dan cenderung tidak bisa mengikuti brows dengan smpurna,saran saya gunakan ukuran dalam % contoh :
@media screen and (max-width:1024px) {
.main-wrapper{width:60%}
.sidebar{300%}
}
jika sudah anda praktekan silahkan di buka di android anda,jika cara di atas belum bisa di praktekin silahkan di coba sampai template anda responsive.demikian cara agar template blog kita responsive mudah mudahan bisa bermanfaat bagi anda semua.
0 Response to "CARA AGAR TEMPLATE BLOG KITA RESPONSSIVE"
Posting Komentar