Cara Mengatur Halaman Blog Agar Responsive - Responsive atau "RESPON" berarti menerima dan dapat menyesuaikan diri terhadap hal-hal yang diterima serta dapat mengatur letaknya sesuai dengan dimana halaman tersebut terbuka sebagai tempat. Responsive bisa juga diartikan sebagai fleksibel area halaman blog, jika halaman dibuka pada resolusi layar yang kecil, maka tampilan halaman blog akan mengikuti lebar layar yang Anda gunakan saat membuka halaman blog saat ini. Sebagai contoh coba Anda minimalkan ukuran layar monitor Anda saat ini, maka secara otomatis halaman akan ikut menyusut mengikuti resolusi layar, hal inilah yang disebut dengan Responsive Page.

Bukan hanya itu, bahkan sebuah website dituntut harus mampu malakukan pendekatan untuk mengatur hasil tampilan halaman yang menunjukkan bahwa desain dan perkembangan dapat merepon dan tanggap pada perilaku pengguna berdasarkan ukuran, platform dan orientasi layar secara otomatis. Dengan kata lain sebuah website harus memiliki sistem teknologi otomatis untuk dapat merespon preferensi pengguna berdasarkan resolusi layar yang digunakan seperti Komputer PC, Laptop, Netbook, Tablet, SmartPhone dan Mobile Phone.

Top Artikel - CSS Flower Navigasi Efek Rotasi

Tidak semua ukuran resolusi layar pada perangkat yang Anda gunakan sama, semua memiliki lebar dan tinggi yang berbeda-beda, untuk itu kita perlu mengatur halaman blog agar responsive, sehingga letak dan layout halaman tetap dalam tampilan yang rapi dimanapun halaman tersebut terbuka dengan menambahkan kode @media-screen, contoh seperti ini:


//halaman hanya akan tampil dengan lebar maksimal 800 piksel
@media only screen and (max-width:800px) {

//pengaturan halaman full (1, 2 atau 3 kolom)
#outer-wrapper {width:750px; margin:0 auto;}

//halaman posting (jika pada mobile phone akan tampil individu)
#main-wrapper {width:750px;}
//layout sidebar
#sidebar-wrapper {width:750px;}
//layout kolom footer
#footer {width:750px;}
}

Dengan pengaturan @media-layout diatas, maka jika halaman blog terbuka pada resolusi layar yang kurang dari 800px, halaman akan secara otomatis berubah tampilan menjadi 1 kolom full, contohnya pada layar tablet atau mobile phone yang memiliki ukuran layar yang cukup kecil, sehingga tampilan halaman akan menempatkan kolom sidebar dibawah setelah halaman posting secara sejajar dalam 1 kolom.


Berikut Cara Mengatur Halaman Blog Agar Responsive
1. Penempatan Kode
1.1. Tag Meta Responsive
Temukan kode <head> pada Template Anda, lalu letakkan kode ini dibawahnya:

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


1.2. CSS Lay Out Media
Kemudian letakkan kode berikut pada HTML Template Anda sesuai elemen id pada area masing-masing untuk mengatur lebar tampilan halaman yang responsive seperti ini:

<style type='text/css'>
@media only screen and (min-width:768px) and (max-width:999px){
   #outer-wrapper{width:754px}
   #main-wrapper{width:60%}
   #sidebar-wrapper{width:40%}
   #headnya{max-width:260px;min-width:250px}
   #head-ads .widget{margin:15px 0}
   #header h1,#header p{padding:15px 0 0;font-size:240%}
   #header .description{padding:0 0 10px}
   //tambahkan elemen id lainnya disini...
}

@media only screen and (max-width:767px){
   #outer-wrapper{width:440px}
   #sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
   #isifooternya .footer-wrap{width:100%}
   #nav{...}
   #search-result-container{width:100%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #outer-wrapper{width:310px}
   #header h1,#header p{font-size:230%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (min-width:768px) and (max-width:999px){
   #slides ul{height:200px}
   #slides h4{font-size:15px}
   #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
   .post-outer{width:100%}
   .post{width:370px}
   .blog-posts.hfeed::before{left:27px}
   .post-body p{overflow:visible}
   .post h2.post-title{height:auto;}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #slides ul{height:450px}
   .post{width:228px}
   .post h2.post-title{max-height:200px;}
   .post-body p{font-size:11px;padding:0}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #social-side2{padding:0}
   #social-side2::before{content:""}
   //tambahkan elemen id lainnya disini... 
}
</style>


2. Penyesuaian Kode
Pengaturan kode ini saya ambil langsung untuk mengatur halaman blog ini agar responsive, bahkan letak menu navigasi, kolom pencarian dan tombol share semua sudah saya atur agar responsive yang artinya elemen ID untuk halaman yang saya gunakan belum tentu sama seperti yang Anda gunakan, jadi silahkan Anda sesuaikan terlebih dahulu ID apa yang Anda gunakan untuk mengatur letak halaman pada Template Anda. Contoh seperti kode ini:

#outer-wrapper
#main-wrapper
#sidebar-wrapper


Nah jika sudah ketemu, Anda bisa tambahkan pada pengaturan media-screen pada masing-masing area pada CSS diatas, mudah bukan..!!! hehe.... semoga artikel ini dapat membantu sahabat semua pecinta SAHABAT BLOGGER 77 dalam mengatur halaman blog yang responsive dengan tampilan yang rapi. Happy blogging.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Mengatur Halaman Blog Agar Responsive
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

78 komentar

  1. ngemeng2 blog sy sih dh responsive blb yah .... hehehehe :)

    BalasHapus
    Balasan
    1. hmmmm,,,,,kasih tahu gak ya..?

      Hapus
    2. ciaaaaaaaaaaaaaah ..... devy mw maen petak umpet nih rupanya ,,,

      Hapus
    3. Lho koq malah main kucing kucingan bukanya cepetan pasang script responsive ini pada blog Mas Fiu. biar lebih keren bloge Mas? yah Kan Mbak Devy..? :-bd

      Hapus
    4. hahahaha,,, itu mas saud ,,, devy nya ngajak petak umpet dulu ama sy ,,, :)

      Hapus
    5. mana jurus modusnya nih mas afgan.kwkwk

      Hapus
    6. modus apa sih yah ? hmmmm ,,,,hehe

      Hapus
    7. hahahah,,,, klo gak trima besok request lg tadz ,,,biar kirimanya bisa dikirm lg ,,,, :P

      Hapus
  2. Kalau gak salah blog saya sudah pasang yang begituan deh Mbak Devy.. tapi kayanya script Responsive Mbak Devy lebih kerenan dikit eh dengan yang ada pada template saya. makasih atas berbaginya ya Mbak salam ceria :)

    BalasHapus
    Balasan
    1. menambahkan letak layout halaman posting, tidak ada pengecualiaan, semuamya saya tambahkan disana, seperti ini:

      [pre]@media only screen and (min-width:768px) and (max-width:999px){
      #slides ul{height:200px}
      #slides h4{font-size:15px}
      #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
      .post-outer{width:100%}
      .post{width:370px}
      .blog-posts.hfeed::before{left:27px}
      .post-body p{overflow:visible}
      .post h2.post-title{height:auto;}
      }[/pre]

      karena bisa saja, seperti menu navigasi tidak ikut menyusut saat layar diminimalkan, kalau bisa sebisa mungkin apa saja yang tampail pada halaman utama blog semua diatur ke tampilan yang responsive

      Hapus
    2. Saya masih setia dengan yang sekarang sih Mbak. namun yang Mbak Devy sarankan bagus juga. cuma jangan kelewat gak tau aja dengan Responsive. rada mumet soalnya kalau harus bongkar bongkar lagi. pas ada yang keliru maka lumayan nyari yang errornya. makasih pencerahanya :)

      Hapus
  3. kalau template yang saya pake, masih ada scroll di bawah browser kalau browser dikecilkan mbak

    BalasHapus
  4. ya..ya ..makasi juga pernah menyarankan agar memakai template responsive..!,

    BalasHapus
    Balasan
    1. aku ga pernah nyuruh kok hehe.. *lariiii*

      Hapus
    2. tangkep mbak santika yuu b-(

      Hapus
  5. Oya tambahan elemen disini itu bisa diisi dengan apa aja ya lebih jelasnya?

    Ini sangat bermanfaat jadi memaksimalkan tampilan.

    Datang juga ya ada puisi yang perlu dikomentari.

    BalasHapus
  6. Sudah saya terapkan mbak (o)

    BalasHapus
  7. Kayanya blog saya sudah responsive jadi ga perlu repot-repot lagi. Terima kasih mbak, tapi saya amankan dulu deh siapa tau kapan-kapan membutuhkan

    BalasHapus
  8. untung blogku udah responsive jadinya nggak perlu susah2 nerapin kodenya mbak

    BalasHapus
    Balasan
    1. iya mas... saya juga responsive.. tapi yang lebih menantang lagi blogazine itu mas.. :) setiap postingan gitu harus responsive.. hehe :)

      Hapus
    2. pengaturan melalui sistem yang otomatis mas, karena suka lupa jika harus mengeditnya secara manual

      Hapus
  9. heemmm yang mengatur-ngatur responsive ini lah sangat membingungkan.. apalagi dengan gaya blogazine, tampilan postingannya harus responsive juga... ;(

    BalasHapus
  10. Kunjungan perdana mbak,,, ditunggu follow baliknya..
    www.semuadownload.com

    BalasHapus
  11. Thanks mbak atas informasinya, sangat membantu.

    BalasHapus
  12. Salam blogger, halo semua,, Newbie disni nih...
    Nice Interaction.. Knjungi kembali yaaahh..,Trimakasih. :)

    BalasHapus
  13. selalu dapat pelajaran baru tiap berkunjung kesini, template aku sudah responsive ya mba, aku masih pakai template orang, andai aku bisa bikin template sendiri..

    BalasHapus
  14. Semakin responsive template blog maka semakin cepat laju untuk lebih mendapat visitor di serp ya Mbak. Apa keuntungan lain tentang Responsive dengan Validasi HTML 5 Mbak Devy.? Maaf nih saya hanya bertanya mohon pencerahan maksudnya. Terkadang begini Mbak pada jiwa seorang blogging. Tentang SEO Dan segala bisa pada semua element kode, namun pada yang nama nya validasi HTM5 Suka mengabai kan..? menurut Mbak Devy sendiri, tanggapan mengenai html 5 gimana coba Mbak. maaf rada meleset dikit. thx

    BalasHapus
    Balasan
    1. tidak kenapa-kenapa mas, kan ada kolom komentar untuk saling berbagi.

      HTML 5 adalah rekomendasi yang harus digunakan web oleh W3C, karena versi-versi pada HTML untuk saat ini sudah pada tahap akhir perubahan dan perkembangan yaitu HTML versi 5.
      apa itu HTML5 dan keunggulannya.?

      Lihat disini - Pengertian HTML Versi 5

      sedangkan tentang validasi kode ini merupakan unsur yang ada didalam konsep HTML5 tersebut. makanya apakah kode yang akan kita sisipkan sudah valid HTML5 atau belum pada versi templatenya.

      [blockquote]Responsive Page dan HTML5 tidak ada hubungannya dengan SEO. karena tujuan SEO adalah posisi serp pada google penelusuran, karena SEO adalah identik dengan pekerjaan kita dalam membangun sebuah blog.[/blockquote]

      Hapus
    2. Rupanya seperti itu yah Mbak Devy makasih atas pencerahanya (c)

      Hapus
  15. nyimak saja ahh soalnya saya nda ngerti mba devy..dengan script mba devy diatas blog saya ahirnya jadi responsive juga.mksh atuh tlh berbagi

    BalasHapus
  16. request cara membuat halaman blogger jadi satu kolom donk mbak....

    ditunggu banget lho tutorialnya :d

    BalasHapus
    Balasan
    1. tidak sulit kok mas, jadi tidak perlu saya buatkan tutorialnya, karena secara umum template memiliki 3 kolom halaman tampilan
      1. posting page
      2. sidebar <aside>
      3. footer

      yang semua tampilannya sangat jelas dituliskan saat kita membentangkan struktur HTML template, mas tinggal hapus saya elemen-elemen yang mengatur kolom halaman tersebut, misalnya menghapus kode elemen sidebar.

      namun ingat, jika sudah dihapus, maka blog hanya menampilkan halaman posting saja, sedangkan lebar halaman masih sama saat sidebar masih tampil, tinggal ubah lebar halaman postingnya sesuai keinginan.

      atau jika dengan js, mas bisa pelajari disini-

      Menampilkan Postingan Blog Secara Layar Penuh

      Disana saya membuat sebuah tombol pemicu untuk mengubah halaman blog menjadi 1 layar penuh (Full Screen).

      Hapus
  17. ini yang uptodate,
    blog saya responsiv nggak yah ? :)

    BalasHapus
  18. kta si mpunya template sih udah responsiv tapi pastinya ya Wallaahu a'lam...

    saya kok kagum ya sama mbak devy,,,njelasin soal ginian kayak njelasin pelajaran klas 1 sd... dulu gimana sih blajarnya... :D

    BalasHapus
    Balasan
    1. dulu belajarnya sama saya, pak :p
      kebetulan saya sama mbak devy satu bangku :p

      Hapus
    2. satu bangku, satu kelas, dan satu sekolahan, namun waktu naik kelas kita berpisah, devy ambil jurusan bandung jakarta, dan kang jum ambil jurusan jakarta bogor, jadi tidak sebangku lagi dalam bis. hehe..

      Hapus
  19. info baru nih jadi tahu hehehe
    terimakasih mba devy :)

    BalasHapus
  20. dengan penambahan doce tersebut, semua browser baik desktop maupun mobile akan dapat menampilkan halaman website kita dengan sempurna ya Mbak

    BalasHapus
    Balasan
    1. kurang lebih seperti itu mas, karena dewasa ini, mobile sudah dapat mengakses internet layaknya komputer PC, yang membedakannya adalah revolusi layar yang digunakan.

      Hapus
  21. kodenya lama-lama kalau dilihat makin kerenz ya mbak :p
    dalam artian : bisa membuat bintang kejora diatas kepala (pusing) :p

    BalasHapus
  22. weh mantap sekali, saya sudah responsive jadi tak perlu lagi, hahaha

    BalasHapus
  23. Numpang nyimak artikel tantang Cara Mengatur Halaman Blog Agar Responsive. :)
    ternyata di blog ini banyak sekali artikel yang bisa menambah wawasan saya.
    trima kasih ya....

    BalasHapus
  24. kode template yg sy pake sudah ada script dasar responsive, tapi sepertinya blm responsive. save kode dulu ntar diterapin.

    BalasHapus
  25. Wah template saya udah responsive bos...

    BalasHapus
    Balasan
    1. berarti tidak perlu menambahkan lagi ya secara manual,

      Hapus
  26. wahhh kira" tampilan blogg saya udah responsive blom yah mbak hehe ? maklum saya masih bener bener newbie mbak jadi belom begitu faham :)

    BalasHapus
  27. Keren infonya nih, makasiih yaaa ;)

    BalasHapus
  28. salam blogger..

    nice blog, bisa di terapin nih tutornya,,

    BalasHapus
  29. Tampilan blog ku, di dekstop sama mobile perbedaan mencolok banget.. Knapa itu ya ^-^

    BalasHapus
    Balasan
    1. kan sudah jelas perbedaan pada resolusi layar mas. kalau pada layar mobile apakah halaman blog dapat tampil semua (tidak terpotong), atau tidak, ini yang dimaksud responsive page.

      Hapus
  30. super sekali mbak, langsung saya pelajarin :-b

    BalasHapus
  31. wah aku sangat membutuhkan artikel kakak ini lah, terima aksih ya kakak...

    BalasHapus
  32. jadi menyesuaikan lebar dan tinggi kolom pada masing-masing blog untuk membuat responsive dalam tampilan ya gan. ok terima kasih atas pencerahannya. salam sababat blogger.

    BalasHapus
  33. Sy menggunakan template responsif..! Tapi ketika sy mengganti logo header dengan gambar, dan membukanya menggunakan android, tampilan logo tersebut terpotong sebagian, karn tdk menyesuaikan dengan perangkat yg sy gunakan, kira kira kode apa yg perlu sy tambahkan agar logo yg sy gunakan jg bisa menyesuaikan dengan perangkat mobile. Makasih

    BalasHapus
    Balasan
    1. ibarat kolom komentar yang kita tidak pernah membuat untuk menampilkan gambar sipemberi komentar, itu karena ada script yang terpasang secara otomatis saat template diadopsi ke blog untuk digunakan.

      sama seperti header, yang merupakan salah satu area halaman dalam HTML template, jika gambar yang kita sisipkan secara langsung dengan menggatinya lewat edit-tata letak, maka gambar akan tampil secra default (tidak akan menyusut bila gambar dibuka pada revolusi layar yang kecil), jadi tidak ada penambahan kode, tetapi tempatkan gambar pada HTML header-page ditemplate Anda, sehingga gambar ada pada area header.

      Hapus
    2. jadi gambar musti diupload dulu yah ke media penyimpanan online, kemudian kita ambil link kode gambarnya dan menyisipkannya dalam header ??

      Hapus
    3. tepatnya sih bukan di upload, tetapi letakkan URL-gambar pada area header-page secara langsung pada kode HTML Template.

      Hapus
    4. nie kode HTML Headernya kaya gini

      /* CSS Global Wrapper */
      #outer-wrapper {max-width:1100px;margin:20px auto;padding:20px;overflow:hidden;}
      #post-wrapper {float:left;width:70%;margin:0 0 10px;}
      .post-inner {padding:15px 15px 0 0;}
      #header-wrapper {width:100%;margin:0 auto;margin-bottom:15px;overflow:hidden;}
      #header {float:left;width:100%;max-width:257px;}
      .header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
      max-width:728px;}
      .header-wrapper2 {position:relative;z-index:999;}
      #sidebar-wrapper {float:right;width:30%;margin:0 auto;}
      .sidebar-inner {padding:15px 0;}
      #footer-wrapper {width:100%;text-align:left;overflow:hidden;margin:20px 0px 0px 0px}
      #footer-widgetfix .footer-widget {width:30.6%;float:left;margin-left:20px;}
      #footer-widgetfix {max-width:1100px;overflow:hidden;margin:0 auto;}
      #footer-wrapper .widget-content {text-align:left;margin:20px 0 15px;}
      #footer-wrapper .widget-content li {margin-left:-14px;}
      #footer-wrapper .widget li {margin:5px 0 0 0;padding:5px 0 0 15px;display:block;}
      #credit {width:98%;margin:0 auto;}
      .credit-left {text-align:center}
      .credit-right {float:right;margin:9px 0 0}
      .footer-bottom {min-height:40px;}
      #footx1,#footx2,#footx3 {margin:0 .2%}
      .footer {padding-bottom:.2em;}
      #social_networks{width:100%;display:block;margin:0 auto;text-align:center;}
      #social_networks ul {list-style:none;}
      .lyco-search {position:relative;padding:0;height:0;margin:0 auto;}

      /* CSS Header Wrapper */
      #header-wrapper {width:100%;margin:15px auto;overflow:hidden;padding:0;}
      #header {float:left;width:100%;max-width:257px;color:#46515e;margin:0;}
      #header h1, #header p {font-family:'Open Sans';font-size:250%;font-weight:400;color:#46515e;text-transform:uppercase;display: none;}
      #header a {color:#46515e;text-decoration:none;transition:all 0.3s ease-in-out;}
      #header a:hover {color:#cbbb7f;}
      #header .description {font-family:'Open Sans';font-size:100%;font-weight:400;color:#5b686a;text-transform:none;display: none;}
      .header img {display:block;}
      .header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
      max-width:728px;}
      .header-right img {display:block;}

      kira kira sy harus merubah kode / menyisipkan kode apa jika header menjadi responsif secara keseluruhan

      Hapus
  34. malam sobat mau nanyak soal buat halaman blog utama gimana cara nya makasih

    BalasHapus
    Balasan
    1. halaman blog utama maksudnya seperti apa ya, membuat diagaram blog menjadi beberapa sumber dengan 1 halaman utama atau giman.?

      Hapus
  35. kalau saya kurang ngerti sama yang beginian, download yang sudah jadi saja :D

    BalasHapus
  36. Susah juga ya template responsive untuk dipahami he...he...maklum baru beralih ke responsive. Ok makasih dah berbagi. Salam sukses Sob

    BalasHapus
  37. benar2 ga ngerti saya mba devy, kmarin saya coba terapin, hasilnya malah kacau balau

    mohon pencerahannya mba... soalnya kemarin saya cek blogsaya seonya cuman 48% mba.. mengerikan

    BalasHapus
  38. boleh ga minta emailnya mba... saya kirim aja sekalian template saya... saya bingung sekali
    mba devy

    BalasHapus
    Balasan
    1. Devy akan kirimkan ke akun G+ aja ya, soalnya kalau disini ntar banyak yang tahu, hehe..!!

      Hapus
    2. Ya mba.... makasih ya 'Mba...

      Hapus
    3. maaf Mba devy...
      klo boleh ini E-Mail saya
      mtpurba86@gmail.com

      Hapus
  39. ntar coba liat dan coba...makasih tipsnya

    BalasHapus
  40. tolooooonnngggggg....toloooooooonnngggggg.... ;((
    punya saya menu dan widget bawah pada halaman utama tidak ikut responsive bingung cari elemen id-nya tuoloooongggg... mohon pencerahannya guru!!!! ;-(

    BalasHapus
  41. Mba, sy pakai template responsive tp ga full responsive, jadi sy coba pakai cara yg mba tulis diatas tapi blank. Tolong kalau bisa mba email kosong sy ke jagatrayadi01@gmail.com biar sy bisa kirim template lengkapnya mba. Terima Kasih sebelumnya.

    BalasHapus
  42. gan saya masih bingung gan untuk penerapan css layoutnya dimana ya gan. thx

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK