Cara Membuat Blog Menjadi Responsive

Scholovers Blogger - 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.

Coba sobat perhatikan blog saya ini kemudian kecilkan browser sobat maka tampilan blog ini akan menyesuaikan lebar sesuai lebar dari browser yang sobat gunakan atau sobat bisa cek responsive sebuah blog di http://responsinator.com/. atau  http://mattkersley.com/responsive/

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 sobat, jika kodenya sama jangan diganti

Cara diatas hanya membuat responsive pada bagian outer-wrapper blog saja, jika sobat ingin membuat element blog yang lain menjadi responsive juga cukup menambahkan kode seperti outer-wrapper diatas.
Contoh jika sobat 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 : http://willyseo.blogspot.com/2013/02/Buat-Responsive.html