Cara membuat blog menjadi responsive

Blogger Blog (Banu) kali ini ingin berbagi tentang analogi membuat blog menjadi responsive yang penulis peroleh dari Sdr. Willy SEO. Terus terang konsep Sdr. Willy SEO ini sangat membantu penulis dalam hal merubah tampilan blog Blogger Blog (Banu) ini menjadi responsive 100 % (menurut pendapat pribadi) dan mampu tampil rapi dalam berbagai ukuran layar 1680x1050, 1024x768, 768x1024, 320x420 dan lain-lain. Permasalahan yang penulis hadapi adalah dengan me-responsive-kan bagian footer-wrapper, namun dengan hasil blogwalking ke tempat Sdr. Willy SEO, semuanya jadi terselesaikan, dan sekarang template buatan penulis ini telah mampu tampil rapi di berbagai ukuran layar.

Berikut ini pola pemikiran Sdr. Willy SEO yang aku tulis ulang dalam rangka berbagi pengetahuan dengan para blogger pemula (semacam aku ini), khusus dalam hal mengembangkan blognya menjadi responsive 100 %, dan agar dapat tampil apik dan rapi di berbagai ukuran layar yang dipergunakan untuk mengaksesnya, khususnya untuk perangkat mobile.

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/. 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 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 teorinya, teori kotak dalam kotak.

 

Demikianlah uraian lengkap yang penulis peroleh dari Sdr. Willy SEO yang sangat membantu dalam memperbaiki responsifitas blog Blogger Blogging (Banu) ini, dan semoga apa yang terurai di atas dapat membantu blogger-blogger yang lain.

 

 

Sumber : http://willyseo.blogspot.com/2013/02/Buat-Responsive.html

 

Related Articles

If you enjoyed this article just click here, or subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Tweet