Sudah Lama Nih saya gak post kali ini saya akan ngepost tentang responsive, pastinya kalian pengen donk membuat template kalian menjadi responsive ?? nah kali ini saya negpost tentang DASAR MEMBUAT BLOG RESVONSIVE...

Pertama saya mengartikan jika

HTML = Kulit
CSS     = Tulang

Nah jika pada umumnya template memiliki bagian-bagian seperti

•     Tubuh luar blog atau yang kita kenal Outer/Outer-wrapper
•     Tubuh dalam blog atau Body
•     Kepala blog atau Header
•     Tubuh blog atau Main/Main-wrapper
•     Kaki blog atau Footer

Nah dari 5 bagian tersebut terbagi menjadi banyak sekali bagian-bagian (seperti organ dalam tubuh kita). Untuk sobat ketahui ke 5 bagian itu adalah yang terpenting didalam menjadikan template kalian responsive.
Lanjut ya sob..

Sekarang kita  akan mengetahui ukuran ukuran pada layar sob, saya hanya memberika ukuran layar pada 4 (empat) alat yang umum digunakan masyarakat.
Beriut dibawah ini saya sesuaikan dengan hasil pengamatan menggunakan Ctrl+Shift+M

Oh ya, saya lupa. Untuk membuat tampilan responsive sobat hanya perlu mengatur WIDTH/LEBAR

PC / Laptop

Biasanya ya ukuran layar PC / Laptop itu mencakur ukuran lebar kurang dari 936px
Untuk penerapan kode responsive adalah sebagai berikut :

/* Responsive Blogspot */
@media screen and (max-width:936px){

 body{padding:0 6px 40px;font-size:1em;line-height:1.44;} //Badan dalem blogspot

 #outer-wrapper{width:auto;margin:39px auto;padding:0 ;} //Badan luar blogspot

 #posting-wrapper {width:100%margin:0px} //postingan kalian atur tetap 100% (jangandirubah)

 #posting {width:auto} // Jangan dirubah juga karena ini menyangkut isi didalam #posting-wrapper

 #header-wrapper {width:auto} // Jangan dirubah "auto" karena akan secara otomatis menyesuaikan

 #comments h4, .comments .comments-content .datetime{display:none} // Ohh ya ini termasuk element penting, tetap biarkan seperti ini.
.comments{font-size:12px}

 }

Nah di atas adalah dasar untuk template responsive, karena setiap template berbeda , silahkan diatur sendiri. karena prinsipnya sama kok, sekali kepala tetap kepala dan tidak mungkin dari kepala menjadi kaki.

Perhatikan kode dibawah ini

@media screen and (max-width:936px) {

isi

}

Terdapat kata (max-width:936px) yang artinya "isi" itu hanya berfungsi  SAMPAI ukuran 936px

Selanjutnya ukuran tablet, pada ukuran tablet hanya perlu menyesuaikan organ-organ pada template blogspot agan, seperti organ nav dan organ organ yang lainnya. yang pasti tidak perlu meresahkan Body, Outer-wrapper, posting-wrapper, posting dan header karena ukuran mereka sudah ada pada  ukuran otomatis sampai layar yang berukuran 936px.

Contoh :

@media screen and (max-width:606px){nav{height:auto;}

#search{width:40%; position:relative;}

 nav li{width:50%;float:left;position:relative;}
nav li a{border-bottom:1px solid #222;border-right:0px solid}
nav a{text-align:left;width:auto;text-indent:25px;}

 }

Diatas adalah contoh organ navigasi menu, sobat juga bisa menambahkan yang lain seperti relatedpost, blog archives dan lain lainnya.

Lanjut sekarang ukuran handphone atau smartphone. Untuk smarthphone tentu karena semakin sempit maka akan semakin mudah, item/widget yang dianggap tidak penting, bisa kita hilangkan di setiap tampilan khususnya untuk handphone, karena handphone sempit sob :)

Contoh :

@media screen and (max-width:550px){

#top-ribbon{display:none;}
.breadcrumbs{display:none

 }

Intinya semakin sempit layar, maka harus kita kecil kecilin ukuran ataupun jika memang memaksa ya harus dihilangkan. Sedikit tutorial yang saya pelajarin tadi pagi.
Semoga membantu kalian dalam mendesain template yg responsive.