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'/>

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