Cara Membuat Desain Blog Menjadi Responsive Terbaru
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.
@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'/>
<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. sumber
Advertisement
Loading...
