Membuat desain blog menjadi responsie itu mudah saja, yang sulit itu
cuma merapikan model keresponsivean nya saja. Arti dari responsive
sendiri 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.
@media only screen and (min-width:768px) and (max-width:860px){#wrapper{width:700px}
.post h2.post-title{white-space:normal}
#posts{width:100%; padding:0px}
#box-posts{width:100%; padding:0px}
#sidebar{width:100%; float:none}
#sidebar-wrapper{width:100%; float:none; margin:0}
#sidebar .widget-content(border-bottom-left-radius:0px; border-bottom-right-radius:0px)
.comments{padding:10px}
#comments{padding:10px}
.breadcrumbs{padding:8px 5px 5px 10px}
}
@media only screen and (min-width:18px) and (max-width:767px){#wrapper{width:100%}
#posts{width:100%; padding:0px}
#box-posts{width:100%; padding:0px}
#sidebar{width:100%; float:none}
#sidebar-wrapper{width:100%; float:none; margin:0}
#sidebar .widget-content(border-bottom-left-radius:0px; border-bottom-right-radius:0px)
#sidebar-wrapper h2 {width:100%; float:none}
.comments{padding:10px}
#comments{padding:10px}
#footer-column-divide, #header-left {display:none}
#backtop{cursor:pointer;position:fixed!important;position:absolute;left:50%;bottom:-70px;border-top-left-radius:5px; border-top-right-radius:5px;height:50px;width:35px;background-color:#2980b9}
}
@media only screen and (max-width:380px){.tombol, .tombolkecil, .home-link{display:none}
}
Di situ sidebar dan box post saya buat 100%, itu berarti kalau kamu
membuka blog dengan template JKhirun dengan resolusi layar kurang dari
800 pixel. Maka sidebar dan box post akan bentrok, dan jadi nya box post
akan ada di atas dan sidebar akan ada di bawahnya. Demikian juga dengan
bagian yang lainnya.
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>
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. Anda bisa melihat hasilnya dengan mengecilkan layar browser anda seperti gambar ini
Gambar di atas adalah screensgoot blog saya yang saya kecilkan layar
browser nya, dan merupakan contoh dari desain blog yang responsive.
:)
Sekian semoga tips ini bermanfaat untuk membuat desain blog anda jadi
responsive. sumber
