Dasar Membuat Blog Responsive

Halo Sahabat Niat Ngeblog , kali ini Saya akan Memberikan Dasar Membuat Blog Responsive , Pertama sekali saya Ucapkan Alhamdulilah , karena saya masih diberi kesempatan oleh Allah SWT , Untuk Sharing , Dikarnakan Saya sedang Melaksanakan UKK ,

Berbagai hal dapat kita terapkan dalam blogspot, membuat ini membuat itu, bikin ini bikin itu, salah satunya membuat tampilan sebuah blog menjadi responsive. Tidak mudah untuk membuat sebuah tampilan blog yang responsive.

Sebelum jauh, saya akan menjelaskan lebih jauh, apa sih itu responsive ?

Responsive adalah sebuah tampilan yang menyesuaikan di berbagai ukuran seperti Smartphone, Tablet, PC/Laptop, pokoknya seluruh ukuran layar. Setelah tadi saya berjuang untuk mempelajari responsive, kini saya mengerti.



Pertama saya mengartikan jika



HTML = Kulit

CSS     = Tulang



Nah jika pada umumnya template memiliki bagian-bagian seperti

1. Tubuh luar blog atau yang kita kenal Outer/Outer-wrapper
2. Tubuh dalam blog atau Body
3. Kepala blog atau Header
4. Tubuh blog atau Main/Main-wrapper
5. 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.



Jika kalian mengalami kesulitan silahkan bertanya, saya akan menjawab semampu saya.. hehehe...

 Salam Blogger

Source : Om-ivan.blogspot.com