Bagikan :
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>
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
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'/>
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<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
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Media Pembelajaran
|
0 Komentar untuk "Cara Membuat Desain Blog Menjadi Responsive Terbaru"