Cara Membuat Blog Menjadi responsive

Silang-Saling || Cara Membuat Blog Menjadi responsive, 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 anda perhatikan blog ini kemudian kecilkan browser anda maka tampilan blog ini akan menyesuaikan lebar sesuai lebar dari browser yang anda gunakan atau anda bisa cek responsive sebuah blog di http://responsinator.com/.

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 memiliki ukuran layar 860px.
Sedangkan font pada postingan saya buat menjadi 1em. Jika blog anda di buka pada gadget yang berukutan 860px maka ukuran font pada postingan akan berubah menjaid 1em.
#outer-wrapper adalah kode elemen yang akan dijadikan responsivse

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;}
}