Aridhoprahasti Education Blog: Cara Mudah Membuat template menjadi Responsive Part 2

Sabtu, 18 Januari 2014

Cara Mudah Membuat template menjadi Responsive Part 2

Beberapa hari yang lalu, saya pernah mengshare cara membuat template menjadi Responsive. tetapi celakanya saya lupa mengajarkan cara-caranya mengeditnya. Tetapi sekarang akan saya ajarkan cara mudah membuat template menjadi responsive. Pertumbuhan Mobile yang sangat pesat dibanding perangkat keras lainnya membuat kita harus memberi perhatian khusus kepada pengunjung blog kita yang berasal dari HP, SmartPhone, Tablet dan lainnya.

Part 1 : Cara membuat template Responsive

Part 2 : Membuat template menjadi Responsive : Part 2 Sedang anda baca

Part 3 :Pending

Jika anda mengenal sedikit ilmu CSS dan HTML, sangat mudah melakukannya. Apalagi dengan CSS3 Media Queries.

Apa itu tampilan responsive

Adalah tampilan yang sangat kontibel dari berbagai ukuran layar. Tampilannya yang ditampilkan sangat berbeda dari dekstop view (komputer, laptop dan sejenisnya ), mobile view ( HP, Smartphone dan sejenisnya ) dan tablet view ( tablet dan sejenisnya ).

1. Untuk Blogger

Sebenarnya, Blogger sudah menyediakan tampilan khusus untuk pengguna perangkat keras jenis mobile tetapi desainnya yang sederhana membuatnya tidak banyak digunakan. Saya pun masih menggunakan tampilan khusus mobile.
2. Mengecek tampilan blog anda di berbagai ukaran
Jika kita ingin mengatahui tampilan blog kita di berbagai ukuran layar, dapat membuka link berikut
Buka link ini : Link 1 | Link 2

Mengdisable tampilan Mobile

Alasan dibuat template menjadi responsive adalah karena blogger tidak mengijinkan template khusus untuk mobile, kecuali = buatan mereka sendiri ( dari pihak blogger )sendiri.Jadi, pertama-tama kita harus mengdisable dulu tampilan mobilenya.

1. Buka blogger > Template > Seluler

2. Pilih,

Tidak. Tampilkan template seluler di perangkat seluler,

Bukan

Ya. Tampilkan template seluler di perangkat seluler.

Memasang Meta Tag

Terlebih dahulu kita pasang Meta Tag.

1. Buka blogger > edit HTML

2. Masukkan Meta tag berikut dibawah <head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Menggunakan CSS3 Media Queries

Media Queries dapat mengetahui ukuran layar digunakan. Kegunaannya Media Queries hampir sama dengan IF. Misalnya kita buat contoh Media Queries untuk HP dan Tablet.

@media screen and (max-width : 480px) { /* Jika ukuran layar digunakan dibawah 480px ( maskimal 480px )*/ /* Apa yang harus dilakukan*/ } @media screen and (max-width : 768px) { /* Jika ukuran layar digunakan dibawah 768px ( maksimal 768px ) */ /* Apa yang harus dilakukan */ }

Apa yang harus diingat

Gunakan pixel ( px ) untuk mendefinisikan ukurannya
Gunakan 3 ukuran yiatu 480px/768px/1024px ( Rekomendasi ) atau 240px/320px/480px/768px/1024px ( Lebih baik tapi ribet nanti mengkostuminasinya.

Anda dapat mengedit berbagai widget saat ukuran layar berbeda, misalnya

@media screen and (max-width : 480px) { .popular-post{aturannya widget popular post} } @media screen and (max-width : 768px) { .popular-post{aturannya widget popular post} }

Baca juga: Kisah dan bukti-bukti Nyata Teori mesin waktu menurut John Titor manusia tahun 2036