SIALAN BLOG™

Hallo sahabat blogger, pernahkah Anda menambahkan @media screen dalam template untuk memaksimalkan tampilan blog pada perangkat mobile/ HP.

Belum lama ini saya mendalami ilmu responsive dari pengalaman dan beberapa petunjuk yang telah ditulis sobat blogger lainya.

Pada awalnya saya belum cukup mengerti dengan kinerja sesungguhnya, sebab beberapa kali saya coba menerapkan ilmu ini namun masih saja belum berhasil.

Akhirnya beberapa bulan yang lalu saya putuskan untuk mendownload template yang telah didesain kusus untuk tampil maksimal disemua perangkat, termasuk perangkat mobile, black berry, smart phone, desktop, laptop, notebook dan masih banyak lagi yang lainya. Yang jelas tidak didesain untuk ditampilkan pada layar lebar/ bioskop

Alhamdulillah saya bersukur sekali akhirnya kutemukan juga template ini yang pada saat ini (Januari 2015) masih saya pakai.Thanks to Kang Ismet.

Namun beberapa hari terakhir ini tangan saya mulai gatel lagi ingin mencoba merubah dan menambah widget tertentu, namun yang saya pengen bisa tetap responsive seperti semula.

Meskipun masih tersendat-sendat, akhirnya sedikit celah ditemukan. Awalnya malah tak sengaja, yakni pada saat melihat Inspect Element blog saya sendiri.

Agar pengunjung blog saya tidak mendapat gangguan ketika ada salah satu widget yang gagal beroperasi, saya mulai mengedit tidak masuk pada template namun pada Inspect element dulu.

Saat itu template saya sudah ada CSS margin:0 auto; dan ketika saya tambahkan margin-left:15px; diatasnya  itu tidak berfungsi.

Lalu saya balik untuk yang 15px; berada dibawah  0 auto; bisa berjalan dengan yang diharapkan.

Coba lihat contoh ini untuk uji coba kode penempatan css yang saya maksud disini.

Perhatikan semua kodenya, tidak ada yang beda kecuali penempatan yang saya beri warna merah dengan biru saja.

Berdasarkan uji coba diatas, bisakah Anda menyimpulkan..?
Apa kaitannya contoh itu dengan Media Screen ini..?

Jawabannya ada dibawah ini, silahkan simak dengan teliti supaya tidak salah arti.

Ada sebagiam Style/ CSS yang yang tidak berfungsi jika telah ada style serupa didalamnya. (yang berlaku hanya satu kode saja)
Biasanya (berdasar pola pikir saya) yang lebih aktif adalah kode terakhir. Makanya jika Anda menempatkan media screen berada diatas css aslinya, ini tidak akan berhasil.

Sebagai contoh penempatan Media screen yang benar adalah :

<style type="text/css">
#header {position:fixed;margin:0 auto;}
</style>
<style type="text/css">
@media screen and (max-width:768px) {
#header {position:fixed;margin-left:12px;}
}
</style>

Sebagai contoh penempatan Media Screen yang salah adalah :

<style type="text/css">
@media screen and (max-width:768px) {
#header {position:fixed;margin-left:12px;}
}
</style>
<style type="text/css">
#header {position:fixed;margin:0 auto;}
</style>

Seperti itulah gambaran bagaimana cara membuat tampilan blog bisa responsive disemua perangkat seluler yang benar. Cara ini telah saya buktikan juga pada situs web sharing saya disini.

Saya mengerjakan mulai dari dasar hingga kini telah berhasil 100% responsive menurut pandangan responsinator.com

Untuk kode lengkap Media Screen bisa dilihat disini.
Bagaimana dengan Anda, tertarik untuk mencoba.??