Wednesday, February 12, 2014

Kode CSS untuk membuat template responsive pada website / blog

kode css template responsive
Sekarang ini sudah banyak website atau blog yang telah menggunakan template responsive agar tampilan blog bisa mengikuti sesuai dengan device yang digunakan seperti ipad, smartphone dan juga tampilan desktop sesuai dengan resolution yang digunakan. Sebelum menerapkan template responsive terlebih daluhu kita harus mengetahui elemen-elemen standar yang terdapat pada template website atau blog seperti : konten (ukuran tampilan keseluruhan website), header, sidebar, posting dan footer. Kode CSS yang biasa digunakan untuk membuat template responsive seperti kode dibawah ini.
  1. @media only screen and (max-width:1024px)
    Maksimal ukuran website adalah 1024 pixel.
  2. @media only screen and (min-device-width : 200px) and (max-device-width : 1024px)
    Kode diatas artinya, ukuran minimal website 200 pixel sampai dengan maksimal ukurannya 1024 pixel.
  3. @media only screen and (max-device-width:1024px)
    Artinya, maksimal tampilan website 1024 pixel berdasarkan device yang digunakan seperti table, iphone dll.
Sebelum membuat template responsive pastikan telah terdapat kode dibawah ini. jika belum ada copy kode dibawah ini dan letakkan dibawah kode <head>. 
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Contoh penerapan kode CSS untuk template responsive :
@media only screen and (max-width:1024px)
{
#konten {width:1024px; margin:0 auto;} //ukuran tampilan website
#header {width:1024px;} //ukuran header website
#posting {width:700px;float:left;} // ukuran untuk isi postingan sebelah kiri.
#sidebar {width:300px;float:right;} //ukuran sidebar sebelah kanan.
#footer {width:1024px;} //ukuran footer
Contoh diatas saya gunakan untuk template dua kolom dengan posting sebelah kiri dan sidebar sebelah kanan. Untuk penerapannya pada template kamu, silahkan ID atau class CSS sesuaikan dengan elemen-elemen yang terdapat pada template kamu. karena setiap template website atau blog memiliki elemen-elemen yang berbeda.

Dan contoh dibawah ini adalah kode CSS standar untuk berbagai device seperti smartphone, ipad, dan desktop.
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
/* Kode css */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px)
{
/* Kode css */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{
/* Kode css */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
/* Kode css */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
/* Kode css */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
/* Kode css */
}

/* Tampilan untuk Desktop dan  laptop ----------- */
@media only screen and (min-width : 1224px)
{
/* Kode css */
}
Setelah selesai membuat template website responsive, kamu bisa cek hasilnya disini atau kunjungi juga artikel sebelumnya tentang website dan software untuk edit template blog.