Dalam penerapanya disini kita 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) { #outer-wrapper {width:750px; margin:0 auto;} //ukuran tampilan website #main-wrapper {width:750px;} //ukuran page atau isi #sidebar-wrapper {width:750px;} //ukuran sidebar #footer {width:750px;} //ukuran footer } |
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 tambahkan 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> |
Kode tersebut di gunakan untuk membuat tampilan blog menjadi responsive. Untuk kode CSS-nya sobat 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. Untuk melihat hasilnya bisa lihat disini Smart Responsive Tester for Web Designers klik tombol Lauch the tool. kemudian masukan alamat website atau blog sobat lalu klik Test.
Posting Komentar
Silahkan berkomentar dengan baik & sopan