14 Feb 2014

Cara Membuat Tampilan Blog Responsif

Tampilan responsif bagi sebuah website saat ini hampir seperti sebuah kewajiban. Di tahun 2011 lalu, developer website tidak begitu peduli dengan tuntutan ini. Mereka menganggap bahwa vendor ponsel lah yang bertanggung jawab dengan ukuran layar yang dibuat. Namun, seiring berjalannya waktu, tepatnya awal 2012, tren mulai berubah. Banyak website yang memakai tampilan responsif.

Developer website mau tidak mau harus memikirkan tampilan responsif ini. Bukan berarti ini adalah sebuah masalah yang besar. Banyak jalan yang bisa dilakukan untuk menghasilkan tampilan responsif. Namun, hingga saat ini masih belum banyak yang mengoptimasi ukuran gambar saat tampilan website menjadi responsif. Karena hal itu perlu konfigurasi server yang tidak mudah.

Di entri kali ini saya akan membagi inti dari bagaimana cara membuat tampilan responsif. Penasaran bukan?

Cara Membuat Tampilan Blog Responsif

Dulu saat pertama kali saya mengenal tampilan responsive, saya hanya menggunakan kueri media yang ada di CSS. Namun, ternyata hal itu hanya berlaku untuk perangkat besutan Apple saja, seperti iPhone dan iPad. Untuk Android, ternyata ada standar tersendiri yang harus ditambahkan.

Tambahkan meta tag berikut ini di antara <head> dan </head>

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Jika di HTML5 hilangkan / sebelum tanda >. Kode di atas digunakan untuk template Blogger yang berbasis XML.

Setelah itu, tambahkan kueri media di kode CSS kamu. Misalkan kamu ingin membuat tampilan yang berbeda di ukuran lebih kecil dari 721px dan lebih besar dari 480px, berikut cara penulisannya.

@media screen and (max-width: 720px) and (min-width: 480px) {

 /*-- isi dengan kode CSS-mu di sini --*/

}


Begitu juga dengan ukuran-ukuran yang lainnya, kamu bisa mengubah kode "max-width" dan "min-width"-nya. Mudah, bukan?

Contoh Template Blogger Responsif

Jika kamu pengguna layanan Blogger, kamu bisa mencoba salah satu template Blogger yang responsif ini.

Respon-X Blogger Template

Tertarik, kamu bisa mengunduhnya di halaman Download Respon-X. Kamu juga mengetes template ini dengan Responsive Tools.

Mengetes Tampilan Blog Responsif

Jika kamu ingin mengetes apakah tampilan website/blog kamu yang sudah responsif, kamu bisa mengunjungi situs Responsive Tools ini.

Responsive Tools

Selamat mencoba :)

26 komentar:

  1. Emmm memangnya kalau sudah responsive kenapa mas? :/ Maaf mas saya masih newbie baru 2 bulan bikin blog... Mohon bimbingannya ya... :)

    BalasHapus
    Balasan
    1. kalo responsif lebih enak dipandang mata
      apalagi kalo diakses dari banyak perangkat ponsel
      tapi ya lebih rempong bikinnya

      Hapus
    2. Owh jadi kalau responsive itu yang gimana mas? :o Apakah yang simpel simpel gitu?

      Hapus
    3. tidak harus simple
      memang kebanyakan website yang responsive itu tampilannya simple
      blog ini tampilannya simple, tapi tidak responsive
      kalo pengen tahu, coba buka tools yang aku kasih di entri ini

      http://intikali.org/responsive-tools/

      lalu masukkan contohnya: responx.blogspot.com

      nanti kamu akan melihat tampilan blog Respon-X yang bervariasi di beberapa lebar layar

      Hapus
    4. Owlaah iya iya mas,,,, :D hehehe blog saya sudah responsive ya...

      Sya biasanya menggunakan tool ini mas:
      http://responsinator.com/
      http://ami.responsivedesign.is/

      Hapus
    5. iya sudah :)
      iya, saya juga kadang menggunakan 2 tools itu kug

      Hapus
  2. wah, tinggal ngoding cssnya tuh yang susah :D

    BalasHapus
    Balasan
    1. Saya pernah coba memasukkan css nya dalam 1 file, didalamnya saya set untuk berbagai ukuran media.

      Ketika di load kenapa tidak bisa di apply css nya ?, jika saya gabungkannstylenya dengan htmlnya justru berjalan sesuai yang saya ingin kan

      Hapus
    2. mungkin < link > ke file CSS nya salah :)
      coba cek lagi

      Hapus
    3. Saya juga seperti itu mas, jika stylenya saya jadikan satu dalam tag <style/> malah gak bisa, jika saya pecah2 ke dalam tag tag style lain baru bisa. Gimana itu mas?

      Hapus
    4. jelas ga bisa lah :D
      kalo HTML itu < style > < /style >
      kalo XML baru < style /> itu bisa :D
      HTML dan XML itu beda aturan dalam markup-nya

      Hapus
  3. Pake browser juga bisa kok

    BalasHapus
  4. Membuat blog responsive lumayan susah juga ya. Nih template buatanku juga belum responsive....

    BalasHapus
    Balasan
    1. kalo dibilang susah tidak juga
      tergantung struktur tampilan responsive-nya :)
      tapi yang jelas butuh waktu ekstra untuk mengerjakannya

      Hapus
  5. yang dimaksud template resposif itu sebenarnya yang gimana sih?

    BalasHapus
  6. pengen si, tapi pusing buatnya, ga pandai coding soalnya

    BalasHapus
  7. mau di praktekin script nya aja di copy gak bisa huhh payah gak ikhlas

    BalasHapus
    Balasan
    1. haha :D
      ngeblog itu tidak mensyaratkan keikhlasan :)

      Hapus
  8. ini berlaku untuk responsif di PC?

    BalasHapus
  9. om... minta tolong donk bantu saya buat responsivkn blog
    saya dah bikin blog itu pngunjungnya juga dah lumayan,cuma saya masih awam nih bahasa dn kode2 gituan,kalo ada yg mo bantu tolong donk minta no hp atau pin bb nya

    terimakasih

    BalasHapus
    Balasan
    1. kalo me-responsive-kan blog tidak gratis :)
      karena itu bukan hal yang mudah dan memakan waktu yang sangat banyak

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia