Cara Membuat Layout Responsive dengan Grid

Web Designing

Download Software

Software Downloads

Virus protection software

Free Templates

Displays

Free antivirus download

Membuat Layout Responsive dengan grid, apa sih layout responsive itu? istilah dalam web design yang dimaksud layout yang menyesuaikan ukuran layar . Sebelumnya saya sudah memberikan contoh template gratisan free template blogger responsive. Nah sekarang saya kan memeberikan dasar membuatnya dan ini merupakan request dari teman blogger CAYUN. Untuk membuat layout responsive kita bisa menggunakan grid, disini saya berikan contoh grid 12 kolom versi Bang Hendro Prayitno (Amdhlas).

/* Simple grid responsive css 12 coloumn by Hendro Prayitno */.row {width:100%; margin:0 auto}.one {width:6.25%}.two {width:14.583333333333334%}.three {width:22.916666666666664%}.four {width:31.25%}.five {width:39.58333333333333%}.six {width:47.91666666666667%}.seven {width:56.25%}.eight {width:64.58333333333334%}.nine {width:72.91666666666666%}.ten {width:81.25%}.eleven {width:89.58333333333334%}.tweleve {width:97.91666666666666%}

.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven,

.tweleve { display:inline; float:left; margin:0 1.0416666666666665%}.clear { clear:both;

display:block; overflow:hidden}.clearfix { clear:both; display:block; overflow:hidden}

/* Media Query */@media screen and (max-width:820px) {.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.tweleve { margin:0 1.0416666666666665%; width:97.91666666666666%}img { height: auto; width: 100%;}.clear { clear:both; display:block; overflow:hidden; margin-bottom:20px}.clearfix { clear:both; display:block; overflow:hidden}

Note : untuk blogger letakkan CSS media query diakhir dibawah sediri setelah CSS yang lain. Sekarang cara pengaplikasiannya.. perhatikan seletor yang diberi nama angka satu (1) sampai dua belas (12) yang artinya anda bisa membuat sebuah layout dengan lebar yang berbeda dengan pilhan sampai 12. Oya di CSS diatas saya berikan dalam bahasa inggris one, two, thre, dan seterusnya. untuk lebih jelasnya perhatikan HTML berikut pengaplikasiannya: <div class="row">

<div class="six"> Konten disini..... </div>

<div class="six"> Konten disini..... </div>

<div class="clear"></div></div>

Dalam penggunaan grid 12 kolom sobat hanya bermain penjulahan yang hasilnya 12 misalnya contoh diatas saya pakai six (6) yang kedua juga six (6) jika dijumlah = 12 ini untuk membuat 2 kolom jika 4+4+4=12 ini akan jadi 3 kolom kalau 4+8=12 ini juga 2 kolom yang satu lebar yang satu agak kecil, lihat contoh nya dibawah ini:

11

1111111111

444

102

48

66

12

Sekarang saya kasih contoh dalam bentuk sederhana sebuah layout web atau blog : Header

Konten Sidebar

footer

Kode yang saya pakai : <div class="row"> <div class="tweleve"> Header........ </div> <div class="clear"></div></div>

<div class="row"> <div class="eight"> Konten........ </div> <div class="four"> Sidebar........ </div>

<div class="clear"></div></div>

<div class="row"> <div class="tweleve"> footer...... </div> <div class="clear"></div></div>

Dalam membuat layout perhatikan juga penggunaan selector .clear seperti arti bahasa indonesaianya bersih jadi ini untuk membersihkan grid. Nah sekarang gimana caranya masang di blogger, disini saya angap sobat sudah terbisa edit template di Edit HTML blogger nah contoh sederhannya sebagai berikut : <div class="row"> <div class="tweleve"> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'/> </div> <div class="clear"></div></div>

<div class="row"> <div class="eight"> <b:section class='main' id='main' showaddelement='no'/>. </div> <div class="four"> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div> <div class="clear"></div></div>

<div class="row"> <div class="tweleve"> <b:section class='footer' id='footer'/> </div> <div class="clear"></div></div>

Mungkin sampai disini dulu penjelasan sederhana dari saya jika ada sebuah pertanyaa atau kurang paham, silahkan berikan komentar dan jika ada yang kurang saya akan update artikel ini. saya ucapkan terimakasih kepda Bang Hendro atas inspirasi simple gridnya dan jika sobat ingin mencoba template yang sudah jadi bisa download template saya disini. Semoga bermanfaat.