Panduan Lengkap Membuat Template Responsive

Memahami Logika CSS Media Queries agar Layout Blog Responsive! - responsive web/blog design! kali ini saya akan berbagi ilmu tentang memahami logika css media queries dalam pembuatan blog agar responsive untuk tingakt lanjut ..
Sebetulnya ini hal mudah jika kita berfikir nya secara simple tanpa berfikir dulu yang lain2, dalam artikel kali ini saya akan mencoba pada layout statis dimana hanya ada beberapa divisi standard pada blog, seperti :
#outer-wrapper, #header-wrapper, #content-wrapper, #main-wrapper, #sidebar-wrapper, dan #footer-wrapper . seperti pada gambar di bawah ini :

Lihat layout-nya langsung Disini ( Sebelum Responsive )

Berikut contoh Struktur HTML Standard Blogger di atas :

<!DOCTYPE html>
<html>
<head>
<title>Nama Blog Kamu</title>
</head>
<body>
<div id="outer-wrapper">
 <div id="header-wrapper">
 #header-wrapper
 </div>

<div id="content-wrapper">
 <div id="main-wrapper">
 #main-wrapper
 </div>
 <div id="sidebar-wrapper">
  <div class='widget-content'>
  #sidebar-wrapper
  </div>
 </div>
</div>
 <div id="footer-wrapper">
 #footer-wrapper
 </div>
</div>
</body>
</html>

dan berikut kode CSS Sebelum Responsive nya :

body {
    background-color: #000;
    color: #fff;
    font-family: arial;
}

#outer-wrapper {
    background: #fff;
    color: #000;
    margin: 0px auto;
    width: 950px;
}

#header-wrapper {
    background: #ff4949;
    color: #fff;
    margin: 10px;
    padding: 10px;
    clear: both;
}

#content-wrapper {
    position: relative;
    margin: 0px auto;
    clear: both;
}

#main-wrapper {
    background: #ffff65;
    color: #000;
    margin: 10px;
    margin-right: 270px;
    padding: 10px;
}

#sidebar-wrapper {
    background: #b3fe3d;
    color: #000;
    margin: 10px;
    margin-top: 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 250px;
    height: 100%;
}

#sidebar-wrapper .widget-content {
    margin: 10px;
}

#footer-wrapper {
    background: #40ebfe;
    color: #000;
    margin: 10px;
    padding: 10px;
}

Bagaiman cara Membuat CSS yang Belum Responsive menjadi Responsive?

Cara Membuat Blog Responsive kali ini saya hanya menggunakan metode CSS Media Queries, yaitu menambah / mengubah value pada property CSS yang sudah ada pada ukuran layar/screen tertentu sesuai dengan standard ukuran layar terkecil, seperti: Notebook, Tablet PC, Handphone, dsb.

Berikut Caranya :

1 - Simpan meta tag di bawah ini tepat setelah kode <head> :

<meta content='width=device-width, initial-scale=1.0' name='viewport'/>

2 - Siapkan CSS Internal seperti dibawah ini sebelum kode </head> :

<style>
/* CSS Media Queries */

...

</style>

Catatan : Symbol Garis Miring (/) dan Bintang (*) hanya tag untuk memberikan keterangan pada CSS di atas.

3 - Kita awali dengan Bismillah tentunya, biasanya template blog memiliki lebar paling kecil 1024pixel untuk ukuran layar komputer dan notebook, nah sekarang kita loncat langsung ke ukuran PC Tablet, yang berukuran 768pixel, maka untuk menyesuaikan CSS Media Queries pada ukuran tersebut tinggal tambahkan kode @media pada Internal CSS yang sudah kita buat pada langkah ke-2, dan tambahkan 1pixel untuk property max-width menjadi 769pixel, agar berfungsi dengan semestinya :

<style>
/* CSS Media Queries */

@media (max-width:769px) {
.. Pengaturan CSS Disini pada Ukuran Layar 768pixel ..
}

</style>

4. Kita Lihat CSS Sebelum Responsive nya, lihat pada divisi #outer-wrapper disana terdapat property width dengan value 950px (pixel) , maka kita rubah value tersebut jika di tampilkan pada layar berukuran 768pixel dalam Internal CSS yang kita setting di langkah ke-3, maka akan ditulis sebagai berikut :

<style>
/* CSS Media Queries */

@media (max-width:769px) { /* Setting Pada Ukuran Layar 769pixel Disini */
#outer-wrapper { max-width:950px; width:100%; }
}

</style>

Untuk melihat hasilnya, jika sobat menggunakan Browser Firefox Terbaru tinggal tekan pada shortcut keyboard CTRL + SHIFT + M, atau jika menggunakan Browser Google chrome sobat bisa menggunakan

Berikut Hasil CSS yang sudah di set pada ukuran layar 768pixel di atas :

5. Jika Browser di Resize ke Ukuran 600pixel, rasa-nya terlalu kecil ukuran lebar untuk tampilan artikel / divisi #main-wrapper seperti screenshot di bawah ini :

Maka solusi nya yaitu kita buat lagi settingan untuk ukuran layar 600pixel, cara-nya tidak jauh seperti langkah ke-4, kita lihat kembali CSS sebelum responsive-nya, lihat css divisi #main-wrapper dan #sidebar-wrapper , setting CSS nya menjadi seperti di bawah ini :

<style>
/* CSS Media Queries */

@media (max-width:769px) { /* Setting Pada Ukuran Layar 769pixel Disini */
#outer-wrapper { max-width:950px; width:100%; }
}

@media (max-width:600px) { /* Setting Pada Ukuran Layar 600pixel Disini */
#main-wrapper { margin:10px!important; }
#sidebar-wrapper { margin:10px!important; position:relative; height:auto; width:auto; }
}
</style>

Maka hasil-nya akan seperti di bawah ini :

Selesai! ..

Berikut Referensi Ukuran Layar standard yang sering saya gunakan untuk membuat template blog agar responsive :

Semoga Bermanfaat, jika ada yang ingin ditanyakan seputar Cara Membuat Blog menjadi Responsive silahkan di tanyakan pada form komentar di bawah ini . Terima kasih sudah meluangkan waktu-nya untuk berkunjung di blog sederhana saya.
dikutip : http://blog.kangrian.com/

Senin, 29 September 2014

Panduan Lengkap Membuat Template Responsive

Bagaiman cara Membuat CSS yang Belum Responsive menjadi Responsive?

Selesai! ..

Artikel Terkait Panduan Lengkap Membuat Template Responsive :

Entri Populer

Labels