Memahami Logika CSS Media Queries agar Layout Blog Responsive! - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 6/05/2014 12:52:00 PM Memahami Logika CSS Media Queries agar Layout Blog Responsive! Memahami Logika CSS Media Queries agar Layout Blog Responsive!

Memahami Logika CSS Media Queries agar Layout Blog Responsive!

Oleh. Kang Rian  •  47  •      Edit
Memahami Logika CSS Media Queries agar Layout Blog Responsive!
Memahami Logika CSS Media Queries agar Layout Blog Responsive!
Sent Pin it!
Memahami Logika CSS Media Queries agar Layout Blog Responsive!Halo, para maniac 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 Extensi "Window Resizer"

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.
Salam Blogger, A.K.A ` Kang Rian!
Sent Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

       

47 komentar

  1. Cihan Namaku6/05/2014 3:44 PM

    Pertamaxx, menurut saya dan berdasarkan pengalaman yg gak sengaja jg sih sebenernya..
    1. awalnya tuh pahamin dlu template yg gak responsive
    2. setelah itu mudah untuk ngatur dan memahami template yg responsive dgn bantuan CSS Queries
    3. Mudah

    BalasHapus
    Balasan
    1. Rian Nurherdian6/05/2014 4:50 PM

      Betul sekali sob cihan, memang seperti itu pengalaman saya juga! dan yang lebih gampang lagi kalo udah stack gak ngerti .. tanya sana-sini .. biar ujung2nya ngerti :D . hehe

      Hapus
  2. AGUS MAKMUN6/05/2014 6:25 PM

    premium akang.. :D
    terimakasih tutorialnya sudah dibuatkan dengan payah2nya..hehe.. :D

    BalasHapus
    Balasan
    1. Rian Nurherdian6/05/2014 6:28 PM

      iya kang agus, sama-sama . semoga bermanfaat! gapapa, ilmu bukan buat di koleksi kang, tapi di amalkan sebagaimana mestinya.. :)

      Hapus
    2. AGUS MAKMUN6/05/2014 6:33 PM

      hehe betul sekali.. :D
      seperti semboyan saya di web python.. hehe
      Ilmu yang kamu miliki tidak akan habis ketika diberikan dengan orang lain. Justru dari situlah awal keberhasilan sejatimu.
      wkwkwkwkwk... :D

      Hapus
    3. Rian Nurherdian6/05/2014 6:49 PM

      saya suka sama quotes nya kang .. :D #mangstab (y)

      Hapus
  3. Beben Koben6/05/2014 6:29 PM

    template saya dong dibuatin responsive bos...cucah euy...huehuehuheuhe :D

    BalasHapus
    Balasan
    1. AGUS MAKMUN6/05/2014 6:33 PM

      wah mau juga dunk saia... :D

      Hapus
    2. Rian Nurherdian6/05/2014 6:57 PM

      @kangbeben & @agusmakmun : boleh kang, silahkan kirim via email aja template nya, biar saya modif dikit css nya ..
      email saya : [tag]kangrian14@gmail.com[/tag]

      Hapus
    3. AGUS MAKMUN6/05/2014 7:01 PM

      horeee.... :D
      akhirnya... muaaakaciih bingit akang.. :D
      :peluk

      Hapus
    4. Rian Nurherdian6/05/2014 7:13 PM

      haha alay nih kang agus! :hammer

      eaaa macamaa.. :bingung

      Hapus
    5. Adnan Zaki10/13/2014 4:56 PM

      kang rian saya mau juga dibuatin dong... udah putus asa nih nyoba berbagai tutor gada yg berhasil :bingung :capedeh

      Hapus
  4. Bagus Prehan6/05/2014 6:48 PM

    Dalam membuat template responsive yang harus dilakukan pertama kali harus paham dulu tentang CSS. Dulu saya agak pusing membuat template responsive, tpi ya sedikit demi sedikit paham juga :D

    BalasHapus
  5. Akat Suki6/05/2014 6:51 PM

    Thanks pro, nice post :ilovekaskus

    BalasHapus
  6. Febri Tri Harmoko6/06/2014 12:43 AM

    wah ... ini yg di cari2 kang :) makasih :) :iloveindonesia

    BalasHapus
    Balasan
    1. Rian Nurherdian6/06/2014 11:09 AM

      Sip! silahkan kang dipelajari dulu .. nanti kasih tau yang lain kalo ada yang belum ngerti, biar semua blog di indonesia pada responsive ! :thumbup

      Hapus
  7. Rismawan N6/06/2014 6:44 AM

    sangat di mengerti kang, makasih ilmunya :)

    BalasHapus
  8. Mauliyandri Alhikmah6/06/2014 8:03 AM

    wah mantap gan,
    kunjungan perdana :2thumbup

    BalasHapus
  9. Umar A. M. F6/06/2014 2:55 PM

    buat tambahan kang,.. padu padan pemberlakuan logika responsive dan tag conditional juga bisa dikolaborasikan untuk perintah2 css sedehana diantaranya seperti yg kang riang udh tulis diatas

    + juga bisa buat "media print",..

    sangat membantu kang,. artikelnya

    BalasHapus
  10. Peternak Web dan Blog Indonesia6/06/2014 4:01 PM

    :sup2 :sup2 :sup2 :sup2

    BalasHapus
  11. Enis Sobanah6/06/2014 4:37 PM

    Kunjungan balik dari Garut,,,,tapi kalau untuk berkomentar soal Tutorial saya angkat tangan saja dech,,,maklum hehe,,,,BTW salam kenal juga Kang Rian.....

    BalasHapus
  12. Tenri Baso6/06/2014 6:17 PM

    :iloveindonesia :2thumbup :bingung

    BalasHapus
  13. Gareth Ikal6/09/2014 1:35 PM

    kang, saya juga bleh gk dibuatin template yg responsive ? :2thumbup

    BalasHapus
    Balasan
    1. Rian Nurherdian6/13/2014 11:09 AM

      saya lagi bikin template responsive kok, di tunggu launching nya yaa.. :D

      Hapus
  14. Ghufroni Sholih7/03/2014 10:17 PM

    mau tanya saya kang , kalau saya mau buat responsive dengan tehnik diatas tetapi tampilannya berbeda bisa ndak ya ? (misalnya tata letaknya berubah-ubah yang awalnya diatas menjadi kepaling bawah begitu)

    sebelumnya salam kenal kang, pendatang baru :thumbup

    BalasHapus
  15. Anonim8/05/2014 8:35 PM

    terimakasih gan, mau coba praktek nih
    http://kebal-online.blogspot.com

    BalasHapus
  16. Divisipas Sulteng9/22/2014 5:13 PM

    Sundul gan

    BalasHapus
  17. Ridwan Ahmad Onez9/24/2014 4:54 PM

    gan, untuk template blog kang rian ini ada link downloadnya ga ? Kalau boleh minta gan

    kalau pun ga boleh, kira kira ada ga template serupa seperti ini,

    Terima kasih sebelumnya gan :D

    BalasHapus
  18. Alza Cita Karya11/27/2014 11:40 AM

    mas kalu buat sidebar biar gk tampil di versi mobile gimana?

    BalasHapus
  19. adit muhamad12/18/2014 3:11 PM

    MAAF MAS BISA DIBANTU, BINGGUNG.../

    INI YANG MAS RIAN SEBUTKAN DIATAS
    'widget-content'
    header-wrapper
    content-wrapper
    main-wrapper
    sidebar-wrapper
    outer-wrapper
    NAH PUNYA SAYA DI HTMLNYA

    Wrapper
    ============================= */
    #total-wrapper {
    #outer-wrapper{
    #main-wrapper {
    #sidebar-wrapper{
    APA INI SUDAH MEWAKILI WREAPER2 TEMPLATE SAYA........

    terima kasih MAS

    BalasHapus
  20. Chasan Anshori1/15/2015 6:26 PM

    terimakasih

    BalasHapus
  21. leli soenarko2/01/2015 9:20 AM

    bisa bantu saya mas??

    BalasHapus
  22. Fitri Hady Amrullah3/30/2015 6:10 AM

    baru belajar kang, mau tanya, gimana cara edit secara offline kang?apakah bisa?

    BalasHapus
  23. Fitri Hady Amrullah3/30/2015 6:11 AM

    Blog saya masih standar bingit kang, hehehe Fitri Hady Amrullah Blog

    BalasHapus
  24. Apotek Herbal ACE MAXS5/23/2015 11:25 AM

    thanks buat infonya gan,, sangat bermanfaat sekali..

    http://goo.gl/7kJRyb

    BalasHapus
  25. Si Doel8/21/2015 12:12 PM

    mas saya baru bikin blog kalo kya gini bagus gak? >> _gallardowallpaper.blogspot.com_
    :o
    please bales

    BalasHapus
  26. ken dhou11/22/2015 8:18 PM

    Maaf sebelumnya Sob, saya termasuk pemula meskipun blog saya sudah cukup lama (karena baru-baru ini julai aktif).
    Saya masih belum ngerti tentang template responsive, baru-baru ini saya menggunakan template responsive hasil download, mau rubah sidebarnya lebih lebar ke ukuran 300px blm bisa (sdh saya coba jadi tumpuk2an sama main).
    Mohon pencerahannya

    BalasHapus
  27. Dewi Aja12/07/2015 8:36 AM

    pengetahuan css utk blog.

    Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    BalasHapus
  28. Anonim12/20/2015 7:19 AM

    jian sangat manfaat bagi pemula seperti saya ini

    BalasHapus
Utama Blogger CSS Media Queries Responsive Memahami Logika CSS Media Queries agar Layout Blog Responsive!

Terpopular! Minggu ini..

×

Konversi Bersihkan