Cara Membuat Blog Menjadi Responsive

Cara Membuat Blog Menjadi Responsive - Blog Responsive adalah blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya, Seperti gadget yang kita gunakan misalnya Laptop, Tablet, Smart Phone. Tentu setiap gadget ukuran resolusi layarnya berbeda-beda ada yang 1680x1050, 1024x768, 768x1024, 320x420 dll.


Jadi sebuah website/blog akan menyesuaikan dengan ukuran resolusi layar gadget itu sendiri misalnya website dengan ukuran lebar 1024px dibuka menggunakan gadget Iphone atau smartphone beresolusi 420x320 jika website tersebut bersifat responsive maka otomatis lebar website tersebut akan berubah menjadi 420px.

Coba anda perhatikan blog ini kemudian kecilkan browser anda maka tampilan blog ini akan menyesuaikan lebar sesuai lebar dari browser yang anda gunakan atau anda bisa cek responsive sebuah blog di http://responsinator.com/. atau  http://mattkersley.com/responsive/

Cara membuat blog menjadi responsive :
Untuk membuat blog menjadi responsive cukup menambahkan kode @media-query pada CSS.
Caranya :

1. Buka dashboard blog > Template > Edit HTML > Centang Expand......
2. Cari kode ]]></b:skin>. Dan tambahkan kode @media-query dibawah tepat diatasnya.

@media screen and (max-width: 860px) {
.outer-wrapper {
width: 100% ;
}
body {font-size: 1em;line-height: 1.44;
}
}
Keterangan : Untuk ukuran 860px saya membuat lebar outer-wrapper menjadi 100% agar lebar blog dapat tersesuai pada resolusi gadget yang digunakan. Sedangkan font pada postingan saya buat menjadi 1em.
outer-wrapper adalah kode dari blog saya silahkan diganti dengan kode yang ada di template anda, jika kodenya sama jangan diganti
Cara diatas hanya membuat responsive pada bagian outer-wrapper blog saja, jika anda ingin membuat element blog yang lain menjadi responsive juga cukup menambahkan kode seperti outer-wrapper diatas.
Contoh jika anda menginginkan header blog menjadi responsive maka kodenya seperti ini :
@media screen and (max-width: 860px) {
.outer-wrapper {
width: 100% ;
}
header-wrapper {width:100%;padding:0;margin:0
}
body {font-size: 1em;line-height: 1.44;
}
}

Atau Memakai Cara yang ini :

Di template sobat ada pembagian struktur seperti ini :
#outer-wrapper
#main-wrapper 
#sidebar-wrapper
#header
#footer
Nah, disini kita bayangkan itu adalah sebuah kotak dan di dalamnya ada kotak lagi, ada lagi, dan bla..bla...
Urutan kotaknya adlh, Body, #outer-wrapper,di dlmnya ada #header, #main-wrapper, #sidebar-wrapper dan #footer

Nah, disini kita ubah kecil-kecilan aja. Ntar ente kembangin sendiri. :p

Ganti aja strukturmu menjadi seperti ini.
#outer-wrapper {
width: 76.666%;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 95% Georgia, Serif;
border-left:2px solid #ddd;
border-right:2px solid #ddd;
background:#fff; }
#main-wrapper { width: 61%;
float: left;
word-wrap: break-word; 
overflow: hidden;
}
#sidebar-wrapper {
width: 32%;
float: right;
word-wrap: break-word;
overflow: hidden;
}
Oke, jika sobat membuat #outer-wrapper menjadi 100% maka lebar templatemu akan terisi penuh dan main juga sidebar akan berada disana.
Tahap berikutnya kita buat responsive, dalam artian jika layar ente kecilin maka  elemen menjadi satu kolom..bahkan di layar 320px. asik ga tuh?
@media handheld,only screen and (max-width:767px)
{#outer-wrapper,body{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;margin-top:0}
#sidebar-wrapper,#main-wrapper,#outer-wrapper,#header,#footer{width:auto;float:none;margin-left:0;margin-right:0;padding-left:2%;padding-right:2%}#header-wrapper{border:none;}}
img,object,embed{max-width:100%}
Coba sekarang perhatikan :
di awal saya kasih di 767px dengan :
#outer-wrapper,body{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;margin-top:0}
Jadi margin dan padding di buat 0 lalu sekarang anaknya supaya di layar 767px kebawah jadi satu kolom:
#sidebar-wrapper,#main-wrapper,#outer-wrapper,#header,#footer{width:auto;float:none;margin-left:0;margin-right:0;padding-left:2%;padding-right:2%}
Saya hanya memberikan padding sebesar 2% di kiri dan kanan..float kita geser jadi none..
Hanya seperti itu teorrinya, teori kotak dalam kotak.
  • http://maz-waone.blogspot.com & http://kudusblogger.com

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Blog Menjadi Responsive

33 comments:

  1. :O master! akhirnya nemu juga tutorialnya! :D thx mastahhh

    ReplyDelete
  2. Mantab nih tutorialnya bro. Saya coba ya, kebetulan lagi pengen punya blog responsive nih :)

    ReplyDelete
  3. ini yg lagi ane cari gan, masih bingung masangnya nih gan..

    ReplyDelete
  4. Punya ane belum responsinator.. :)

    ntar ane coba gan..

    ReplyDelete
  5. maap oot gan, cara bikin pesan yg kaya ente gmn yg pesan ente ga update dulu mau un :D... ane mau masang juga

    ReplyDelete
  6. wah, ribet juga caranya
    disini ada template yang udah responsive gak?

    ReplyDelete
  7. ane coba tapi gagal gan,

    ReplyDelete
  8. Thanks Tutorialnya gan !

    ReplyDelete
  9. trimakasih mas tutorialny ttg cara mmbuat blog responsive..
    -keep blogging-

    ReplyDelete
  10. Saya sementara cari2 dan mengumpulkan cara untuk membuat template blog saya menjadi responsive coz saya lihat di google analitic blog saya, pengunjung yg menggunakan mobile lumayan banyak juga tuh. Makasih atas informasinya sob

    ReplyDelete
  11. Css template Ibarat lautan.
    Bagi pemula seperti saya, tentu cukup binggung untuk mengedit sendiri, apa lagi hanya pake hp doang :D
    Bagai Pelaut baru tanpa Kompas :(
    Sementara hanya bisa menyesuaikan template dengan "Perancang Teplate Blogger" :v
    Buat Admin, thank banyak-banyak atas ilmunya! (y)

    ReplyDelete
    Replies
    1. jangan berputus asa gan. dulu ane juga gitu.

      sama sama gan, saya yang harusnya terima kasih karena agan telah menyisipkan waktu untuk mengunjungi blog ini :)

      Delete
  12. saya pelajari dulu sob :D

    ReplyDelete
  13. makasih agan willy maulana udah ngasih analogi yg gampang, ane sih ada materi css di kuliah, tapi ane lebih suka matkul lainnya dan akhirnya belajar nya dari blogwalking, saya yakin bisa, tapi kadang rasa nggak sabar itu lebih besar gan! hahaha.... sukses terus buat blognya, ane demen banget, background blog ente kagak putih, bikin sakit mata ane yg minus ini, cuman bagian artikel blog yg putih, lainnya dominan kalem, good job! \o/ \o/ \o/

    ReplyDelete

Copyright © WillySEO
Theme designed by Bamz
Powered by Blogger