5 Maret 2014

Mengapa responsive tidak bekerja pada template standar blogger

Malam ini saya akan berbagi pengalaman tentang responsive design dan solusi bagi anda yang telah menambahkan kode responsive tapi yang tampil malah mobile template standar dari blogger, responsive yang sudah dibuat tidak bekerja ketika dibuka melalui handphone atau perangkat mobile lainnya dan hanya berkerja ketika di buka pada browser desktop/komputer. Masalah ini biasanya terjadi pada anda yang menggunakan template standar dan custom template lalu mengaktifkan template untuk perangkat seluler/ mobile template seperti contoh dibawah.

Mengapa template responsive tidak bekerja di perangkat mobile

Setelah template seluler diaktifkan viewport pada meta content akan otomatis ditambahkan pada code html untuk menampilkan mobile template anda yang kurang lebih seperti dibawah ini.

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

kode di atas mempunyai logika "Jika halaman template seluler pada posisi aktif dan web dibuka pada perangkat mobile, maka meta content pertama akan bekerja untuk menampilkan css mobile template standar dari blogger yang kita gunakan juga untuk responsive design, tetapi jika halaman di buka pada desktop/komputer maka meta content kedua yang akan bekerja".

Penyelesaian

Pertama non-aktifkan perangkat seluler yang sudah anda aktifkan agar template standar untuk perangkat seluler tidak tampil dan menampilkan template untuk perangkat desktop.

Nonaktifkan perangkat seluler pada blog agar responsive bekerja

Jika template untuk seluler tidak di aktifkan lagi, maka css pada desain/template mobile standar dari blogger tidak akan tampil walaupun web/blog di akses menggunakan perangkat mobile, blog akan tampil dengan template seperti ketika kita buka pada perangkat desktop/komputer.
Jika media screen untuk responsive design sudah dibuat, berarti template responsive anda yang akan bekerja ketika di akses pada perangkat mobile. Dengan catatan ubah code viewport diatas menjadi seperti dibawah ini.

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
</b:if>


Setelah code diubah, logika akan berubah menjadi "Jika halaman blog diakses pada perangkat mobile ataupun desktop/komputer, maka template yang digunakan adalah template untuk desktop/komputer" dan tentunya akan menyesuaikan ukurannya jika sudah di beri code responsive tanpa menampilkan desain standar untuk perangkat seluler. Semoga bermanfaat.

Mungkin anda ingin membaca artikel dibawah :
  1. Cara membuat template standar dari blogger menjadi responsive
  2. Cara membuat gambar menjadi responsive 100%
  3. Cara menghilangkan google+ followers pada responsive design
  4. Membuat menu navigasi responsive pada template standar blogger
  5. Menghilangkan scroll pada responsive design
5 komentar :
  1. ternyata cara mengubahnya tidak begitu sulit yaa mas, akan saya coba dulu
    thanks mas ilmunya :)

    BalasHapus
    Balasan
    1. Betul sekali mas. silahkan dicoba dan semoga berhasil.

      Hapus
  2. Bagaimana cara memodif template standar bawaan blogger agar bisa responsive? tolong di share...

    BalasHapus
    Balasan
    1. Ok mas, nanti saya share. saya usahakan 2-3 hari ini. thanks pertanyaannya

      Hapus
    2. terimaksih ya gan... saya tunggu dengan sangat..

      Hapus

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser