Setelah kemarin hampir 2 jam modifikasi tampilan blog saya agar
responsive akhirnya selesai juga dan hasilnya cukup memuaskan ketika di
buka dengan berbagai resolusi layar..
Untuk pembahasan kali ini saya akan share bagaimana caranya agar
tampilan blog/website kita menjadi responsive. Seperti yang sudah saya
jelaskan dalam posting waktu lalu tentang "Website responsive testing"
mengenai arti responsive. Responsive pada website adalah menyesuaikan
tampilan website atau blog terhadapa gadget yang kita gunakan, misalnya
Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda.
Disini kita hanya menambahkan kode @media only screen and (max-width:800px) { yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel
contoh:
@media only screen and (max-width:800px) {
}
dengan contoh diatas maka tampilan website menjadi satu colom, yaa
karena ga mungkin untuk tampilan 800 pixel website dengan 2 colom saya
rasa kurang bagus.
Berikut cara untuk membuat tampilan website/blog menjadi responsive:
1. Copy code berikut ini dan letakkan dibawah kode
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
2. Kemudian Copy code berikut ini dan letakkan dibawah kode
]]></b:skin>
<style>
@media only screen and (min-width:768px) and (max-width:989px) {
#outer-wrapper {width:730px; margin:0 auto }
Kode CSS lainya
}
@media only screen and (max-width:767px) {
#outer-wrapper {width:540px; margin:0 auto }
Kode CSS lainya
}
@media only screen and (max-width: 580px) {
#outer-wrapper { width: 500px }
Kode CSS lainya
}
@media only screen and (max-width: 490px) {
#outer-wrapper { width: 430px }
Kode CSS lainya
}
@media only screen and (max-width: 479px) {
#outer-wrapper { width: 280px }
Kode CSS lainya
}
@media screen and (max-width: 260px) {
#outer-wrapper { width: 210px }
Kode CSS lainya
}
</style>
Code tersebut yang saya gunakan untuk membuat tampilan blog ini menjadi responsive
Untuk kode CSS-nya kalian bisa liat ID setiap elemen seperti Sidebar,
main-wrapper, outer-wrapper, footer dan lain-lain karena pada setiap
template ID setiap elemen bisa saja berbeda, seperti blog saya ini yang
biasanya menggunakan #main-wrapper kalau punya saya #content_left.
Semoga bermanfaat.