Featured Post

Cara Membuat Tampilan Blog Responsif

on
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 :)
Hai, saya hanya blogger yang nulis sejak 2008 lalu. Saat ini sedang asyik mengembangkan Game of Calculator

Mungkin Kamu Juga Suka...

Comments

  1. Fly So High | JenivFebruary 16, 2014 at 9:38 AM

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

    ReplyDelete
    Replies
    1. IskaFebruary 16, 2014 at 9:44 AM

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

      Delete
    2. Fly So High | JenivFebruary 16, 2014 at 10:14 AM

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

      Delete
    3. IskaFebruary 16, 2014 at 10:19 AM

      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. Fly So High | JenivFebruary 16, 2014 at 10:32 AM

      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. IskaFebruary 16, 2014 at 11:18 AM

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

      Delete
  2. ImambollFebruary 17, 2014 at 9:55 AM

    wah, tinggal ngoding cssnya tuh yang susah :D

    ReplyDelete
    Replies
    1. IskaFebruary 17, 2014 at 10:00 AM

      ya itulah letak seninya :D

      Delete
    2. JhnWorldMarch 20, 2014 at 2:49 PM

      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
    3. IskaMarch 20, 2014 at 2:58 PM

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

      Delete
    4. JenivMarch 23, 2014 at 2:43 AM

      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
    5. IskaMarch 23, 2014 at 9:13 AM

      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. JhnWorldMarch 25, 2014 at 5:06 PM

    Pake browser juga bisa kok

    ReplyDelete
  4. GhufronMay 8, 2014 at 5:48 AM

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

    ReplyDelete
    Replies
    1. IskaMay 8, 2014 at 7:18 AM

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

      Delete
  5. UnknownMay 8, 2014 at 2:09 PM

    yang dimaksud template resposif itu sebenarnya yang gimana sih?

    ReplyDelete
  6. Seklebet InfoMay 31, 2014 at 8:27 AM

    pengen si, tapi pusing buatnya, ga pandai coding soalnya

    ReplyDelete
  7. Majalah45.comJune 12, 2014 at 12:18 AM

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

    ReplyDelete
    Replies
    1. IskaJune 12, 2014 at 12:56 PM

      haha :D
      ngeblog itu tidak mensyaratkan keikhlasan :)

      Delete
  8. SkullOctober 2, 2014 at 7:35 PM

    ini berlaku untuk responsif di PC?

    ReplyDelete
  9. UnknownDecember 28, 2014 at 10:56 PM

    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. IskaDecember 30, 2014 at 9:00 PM

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

      Delete
  10. UnknownMarch 15, 2015 at 12:08 AM

    css nya di taruh mas gan

    ReplyDelete

Post a Comment

Subscribe to: Post Comments (Atom)
©2013-2024 Belajar Ngeblog bersama Iskael. All rights reserved.