Setelah saya share sebuah template yang responsive sekarang ini saya akan share tentang keresponsivean nya. Sebenarnya 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.
Contoh saya meresponsivekan template JKhirun hanya dengan code ini
@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>
Sekian semoga tips ini bermanfaat untuk membuat desain blog anda jadi responsive
source : http://mdf-blog.blogspot.com/2013/02/membuat-desain-responsive.html
19 komentar
boleh juga ni ilmunya ... patut dicoba . . terimakasih ya
sama-sama :)
Keren sob. Makasih ilmunya :)
sama-sama :)
makasih gan atas informasinya..
keren ni tutornya..terima kasih ya..
MANTAFKAN TIPS NYA , LANJUT..
makasih ya atas tipsnya..
sama-sama :)
nggak berhasil mas ;-(
gak berhasil nya di mana mas?? :-? atur ukuran elemen-elemen di template berdasarkan media queries nya.
Jadi setiap template di buka di berbagai ukuran, elemen template seperti header, sidebar, main wrapper dll, akan berubah ukurannya.
Tutorialnya sangat bermanfaat gan, tapi sayang saya tidak paham :-?
Kalau ada yg membantu saya, saya sangat berterima kasih sekali.
Blog saya: http://catatan-lingga.blogspot.com/
tpi kenpa blog sendiri gak di buat responsive yah ?
sippp gan!!
http://www.muizcyan.co.vu/
sip deh,... udah responsive gan
udah responsive broo
Situs PortaL poker online kumpulan poker online
kunjungi situs salah satu di bawah ini daftar sekarang
http://www.remipoker.co/
http://www.linkdewa.com/
http://www.asiammm.com/
http://www.pokeridr.com
mbah klo punya saya ini udah responsive blom ya http://wibialwis.blogspot.com/
sudah