Featured Post

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 :)

Mungkin Kamu Juga Suka...

Comments

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

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

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

      Delete
    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

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

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

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

    ReplyDelete
    Replies
    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

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

      Delete
    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?

      Delete
    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

      Delete
  3. Membuat blog responsive lumayan susah juga ya. Nih template buatanku juga belum responsive....

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

      Delete
  4. yang dimaksud template resposif itu sebenarnya yang gimana sih?

    ReplyDelete
  5. pengen si, tapi pusing buatnya, ga pandai coding soalnya

    ReplyDelete
  6. mau di praktekin script nya aja di copy gak bisa huhh payah gak ikhlas

    ReplyDelete
    Replies
    1. haha :D
      ngeblog itu tidak mensyaratkan keikhlasan :)

      Delete
  7. ini berlaku untuk responsif di PC?

    ReplyDelete
  8. 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

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

      Delete

Post a Comment