Cara Membuat Template Menjadi Responsive

Saat ini sudah banyak desainer yang membuat template menggunakan fitur responsive. Kenapa fitur responsive saat ini sangat penting? jawabannya sudah saya jelaskan di artikel saya yang berjudul Template Blogger Responsive Rekomendasi 2013.

Bagaimana template yang belum menggunakan fitur responsive? Bagi yang menggunakan template blog yang bukan responsive, tentu saja bisa di buat menjadi responsive. Bagaimana caranya? ikuti langkah-langkah di bawah ini.


Cara Membuat Template Menjadi Responsive

Yang perlu kamu lakukan hanya menambahkan kode CSS di dalam template kamu. Meletakkan kodenya didalam ]]></b:skin> Kodenya seperti ini:
@media only screen and (max-width: 480px){
#outer-wrapper {width: 100%;}
#header-wrapper {width: 100%; padding: 0; margin: 0;}

}
Maksud kode diatas adalah pada layar ukuran 480px, outer-wrapper diatur lebar 100% agar ukurannya dapat menyesuaikan ukuran layar gadget, dan header-wrapper di atur lebarnya 100% memiliki batas dalam 0px dan batas luar 0px.

Cara Membuat Template Menjadi Responsive
Yang perlu kamu lakukan adalah mencari ID Class dari struktur menyusun template kamu. Seperti yang sudah saya jelaskan di artikel saya yang berjudul 6 Element Tags Menyusun Layout Template Blogger.

Tidak semua struktur template susunannya sama, beda template beda struktur. Karena itu saya juga sedikit susah mejelaskannya disini. Tapi akan saya berikan ID Class yang umum di pakai:
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#header
#footer
 Kode di atas adalah umum di pakai dan kamu hanya menambahkan kodenya di dalam @media only screen seperti diatas. Lihat contoh
@media only screen and (max-width: 480px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
@media only screen and (max-width:768px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
@media only screen and (max-width: 800px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
Kode diatas adalah ukuran dari berbagai screen yang bisa kamu terapkan untuk membuatnya menjadi responsive. Dan yang harus kamu lakukan adalah mengisi CSS dari masing-masing ID Css di atas. Kamu bisa menonton video tutorial saya bagaimana mencari setiap ID Class menggunakan browser Google Chrome. Video: Tutorial Cara Mudah Mengedit Template Blogger Part 1.

Jangan lupa tambahkan kode <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> di bawah <head>

Semoga artikel Cara Membuat Template Menjadi Responsive ini bisa di pahami dan bermanfaat untuk teman-teman semua. Terima kasih

35 Responses to "Cara Membuat Template Menjadi Responsive"

  1. masih belum jelas gan, terutama tentang CSS yang mau di pakai, udah nyoba di buat 100% seperti contoh di atas, tetap saja di buka di layar 3 inc yang keluar sama kayak di pc..

    ReplyDelete
    Replies
    1. kemungkinan ID Class yangg di gunakan tidak sama pada contoh diatas. Karena beda template pasti beda ID Class yang di gunakan.
      Yang saya berikan contoh diatas adalah yang umum di pakai belum di modifikasi.

      Delete
  2. Ane kira yg dimaksud dgn responsive itu adalah yg cepat loading-nya. Sedangkan yg di maksud dgn "TEMPLATE valid HTML5" itu adalah template yg bisa menyesuaikan tampilannya dengan kompi dan HP

    ReplyDelete
    Replies
    1. Template yg bisa menyesuaikan tampilannya dengan kompi dan HP itu di sebut Responsive. Sedangkan Template valid HTML5 itu sebuah template yang sudah menerapkan kode HTML5 dan sudah sesuai dengan aturan di W3C, maka di sebut Valid HTML5.

      Untuk mengeceknya bisa di www.validator.w3.org

      Delete
  3. Informasi yang sangat berguna. Saya bookmarks dulu, soalnya butuh waktu cukup panjang + Kopi Panas dan Rokok, buat bergadang untuk edit template responsive. He... he.... Oya.... tips agar tampilan video dan gambar juga responsive, gimana tuch broo...

    ReplyDelete
    Replies
    1. Oke bro. Good Luck.
      Kalau gambar, caranya sama seperti yang sudah di jelaskan diatas. Tinggal kmu mencari css yg mengatur gambarnya.

      Delete
  4. Info bermanfaat mas, kebetulan sedang mencari cara meresponsivekan template blog.saya coba dulu ya.

    ReplyDelete
  5. Selain media query di atas jangan lupa menambahkan kode ini:

    body{overflow-x:hidden}

    supaya pada saat blog kita dibuka pada ukuran layar yang kecil tidak terdapat scroll horizontal. :D

    ReplyDelete
  6. Saya sudah nyoba tapi tidak ada perubahan

    bisa mbantu saya gk?

    ReplyDelete
    Replies
    1. kode diatas hanya kode umum yang biasa di pake di sebagian template gan...
      beda template beda ID Class yang di pakai gan.. coba cari ID Class yang cocok dengan template kamu

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. wah harus banyak belajar lagi nih ke agan
    salam kenal lagi yah ka

    -blogwalking -> maftuhi.com

    ReplyDelete
    Replies
    1. hehe.. salam kenal juga.
      Selamat berblogwalking ria :)

      Delete
  9. Masih bingung saya, tolong di bantu dong mas.

    ReplyDelete
    Replies
    1. coba kamu tonton di video saya, cara mencari ID Classnya http://aikonmedia.blogspot.com/2013/08/tutorial-cara-mudah-mengedit-template-blogger.html

      Delete
    2. This comment has been removed by a blog administrator.

      Delete
  10. wah puyeng saya mas... cssnya ribet banget

    ReplyDelete
    Replies
    1. ya dipelajari dikit-dikit nanti juga gak puyeng :)

      Delete
  11. Sob, cari ngilangin garis di background blogku gimana ya? dah muter-muter gak nemu.
    jawigo.blogspot.com

    ReplyDelete
    Replies
    1. terima kasih sob udah coba membantu.
      sudah teratasi tadi.

      Delete
    2. owh ya udah. selamat. Terima kasih :)

      Delete
  12. mantab tutornya sob,izin praktek ya

    ReplyDelete
    Replies
    1. Oke. semoga tutorialnya mudah di pahami. :)

      Delete
  13. keren, cuma begitu sajakah untuk membuat template responsive? lalu bagaimana dengan html 5? yang katanya bisa membuat blog jg responsive?

    ReplyDelete
    Replies
    1. HTML5 adalah versi terbaru dari html sebelumnya.
      Untuk membuat template responsive adalah lebih ke pengaturan CSS.
      Berapapun versi HTMLnya tetap bisa di buat responsive.

      Delete
  14. bisa di review abumaryana.blogspot.com gimana itu gan ? udah coba sana sini ribet bener cssnya -_-"

    ReplyDelete
  15. Sederhana dan mengena... tidak bertele-tele dan saya langsung paham serta berhasil, tentunya untuk level pemula. hehe Thanks, Gan.....

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete

Berkomentarlah dengan Bijaksana, spamming tidak akan pernah di publish