Saat ini sudah banyak desainer yang membuat template menggunakan fitur responsive. Kenapa fitur responsive saat ini sangat penting?
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.
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.
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
0 Response to "Cara Membuat Template Menjadi Responsive"
Post a Comment