Blog Responsive adalah
blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis
sesuai tempat-nya, Seperti gadget yang kita gunakan misalnya Laptop, Tablet, Smart
Phone. Tentu setiap gadget ukuran resolusi layarnya berbeda-beda ada yang
1680x1050, 1024x768, 768x1024, 320x420 dll.
Jadi sebuah website/blog akan menyesuaikan dengan ukuran
resolusi layar gadget itu sendiri misalnya website dengan ukuran lebar 1024px
dibuka menggunakan gadget Iphone atau smartphone beresolusi 420x320 jika
website tersebut bersifat responsive maka otomatis lebar website tersebut akan
berubah menjadi 420px.
Cara membuat blog menjadi responsive :
Untuk membuat blog menjadi responsive cukup menambahkan kode @media-query pada
CSS.
Caranya :
1. Buka dashboard blog > Template > Edit HTML > Centang Expand......
2. Cari kode ]]></b:skin>. Dan tambahkan kode @media-query dibawah
tepat diatasnya.
@media screen and (max-width: 860px) {
.outer-wrapper {
width: 100% ;
}
body {font-size: 1em;line-height: 1.44;
}
}
Keterangan : Untuk ukuran 860px saya
membuat lebar outer-wrapper menjadi 100% agar lebar blog dapat
tersesuai pada resolusi gadget yang digunakan. Sedangkan font pada postingan
saya buat menjadi 1em.
outer-wrapper adalah kode dari blog saya silahkan diganti dengan kode yang
ada di template anda, jika kodenya sama jangan diganti
Cara diatas hanya membuat responsive pada bagian
outer-wrapper blog saja, jika anda ingin membuat element blog yang lain menjadi
responsive juga cukup menambahkan kode seperti outer-wrapper diatas.
Contoh jika anda menginginkan header blog menjadi responsive maka kodenya
seperti ini :
@media screen and (max-width: 860px) {
.outer-wrapper {
width: 100% ;
}
header-wrapper {width:100%;padding:0;margin:0
}
body {font-size: 1em;line-height: 1.44;
}
}
Atau Memakai Cara yang ini :
Di template sobat ada pembagian struktur seperti ini :
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#header
#footer
Nah, disini kita bayangkan itu adalah sebuah kotak dan di
dalamnya ada kotak lagi, ada lagi, dan bla..bla...
Urutan kotaknya adlh, Body, #outer-wrapper,di dlmnya ada
#header, #main-wrapper, #sidebar-wrapper dan #footer
Nah, disini kita ubah kecil-kecilan aja. Ntar ente kembangin sendiri. :p
Ganti aja strukturmu menjadi seperti ini.
#outer-wrapper {
width: 76.666%;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 95% Georgia, Serif;
border-left:2px solid #ddd;
border-right:2px solid #ddd;
background:#fff; }
#main-wrapper { width: 61%;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 32%;
float: right;
word-wrap: break-word;
overflow: hidden;
}
Oke, jika sobat membuat #outer-wrapper menjadi 100% maka
lebar templatemu akan terisi penuh dan main juga sidebar akan berada disana.
Tahap berikutnya kita buat responsive, dalam artian jika
layar ente kecilin maka elemen menjadi satu kolom..bahkan di layar 320px.
asik ga tuh?
@media handheld,only screen and (max-width:767px)
{#outer-wrapper,body{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;margin-top:0}
#sidebar-wrapper,#main-wrapper,#outer-wrapper,#header,#footer{width:auto;float:none;margin-left:0;margin-right:0;padding-left:2%;padding-right:2%}#header-wrapper{border:none;}}
img,object,embed{max-width:100%}
Coba sekarang perhatikan :
di awal saya kasih di 767px dengan :
#outer-wrapper,body{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;margin-top:0}
Jadi margin dan padding di buat 0 lalu sekarang anaknya supaya di layar 767px kebawah jadi satu kolom:
#sidebar-wrapper,#main-wrapper,#outer-wrapper,#header,#footer{width:auto;float:none;margin-left:0;margin-right:0;padding-left:2%;padding-right:2%}
Saya hanya memberikan padding sebesar 2% di kiri dan
kanan..float kita geser jadi none..
Hanya seperti itu teorrinya, teori kotak dalam kotak.
Sumber: Google
