Cara Membuat Blog Menjadi Responsive

Responsive design adalah kemampuan website untuk mampu menyesuaikan tampilan template nya kedalam berbagai macam gadget yang digunakan oleh pengunjung, seperti Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda. Design Responsive saat ini memang sedang naik daun, karena seperti yang kita ketahui, saat ini orang mengakses internet mayoritas adalah dari gadget mereka. Untuk akan lebih baik jika blog atau website kita memiliki kemampuan untuk Responsive.

Tutorial ini saya dapat dari mdf-blog.blogspot.com. Dimana dia share bagaimana cara nya membuat blog kita ( Khusus blogger ) bisa menjadi Responsive Design. tips ini sudah dicoba dan work hasilnya oleh sang pembuat tips nya.

Dalam penerapanya disini kita menambahkan kode @media only screen and (max-width:800px) yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel contoh:

@media only screen and (max-width:800px)
{ #outer-wrapper {width:750px; margin:0 auto;} //ukuran tampilan website
#main-wrapper {width:750px;} //ukuran page atau isi
#sidebar-wrapper {width:750px;} //ukuran sidebar
#footer {width:750px;} //ukuran footer

Dengan contoh diatas maka tampilan website menjadi satu colom, yaa karena ga mungkin untuk tampilan 800 pixel website dengan 2 colom saya rasa kurang bagus.

Berikut cara untuk membuat tampilan website/blog menjadi responsive:

1. Copy code berikut ini dan letakkan dibawah kode <head>

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

2. Kemudian Copy code berikut ini dan letakkan dibawah kode ]]></b:skin>

<style>@media only screen and (min-width:768px) and (max-width:989px) {#outer-wrapper {width:730px; margin:0 auto }Kode CSS lainya } @media only screen and (max-width:767px) {#outer-wrapper {width:540px; margin:0 auto }Kode CSS lainya } @media only screen and (max-width: 580px) {#outer-wrapper { width: 500px }Kode CSS lainya }@media only screen and (max-width: 490px) {#outer-wrapper { width: 430px }Kode CSS lainya } @media only screen and (max-width: 479px) {#outer-wrapper { width: 280px }Kode CSS lainya } @media screen and (max-width: 260px) {#outer-wrapper { width: 210px }Kode CSS lainya }</style>

Kode tersebut di gunakan untuk membuat tampilan blog menjadi responsive. Untuk kode CSS-nya sobat bisa liat ID setiap elemen seperti Sidebar, main-wrapper, outer-wrapper, footer dan lain-lain karena pada setiap template ID setiap elemen bisa saja berbeda. Untuk melihat hasilnya bisa lihat disini Smart Responsive Tester for Web Designers klik tombol Lauch the tool. kemudian masukan alamat website atau blog sobat lalu klik Test.

Okey, cukup sekian tutorial Cara Membuat Blog Menjadi Responsive. Semoga bermanfaat.

Cara Membuat Blog Menjadi Responsive - Responsive design adalah kemampuan website untuk mampu menyesuaikan tampilan template nya kedalam berbagai macam gadget yang digunakan oleh pengunjung, seperti Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda. Design Responsive saat ini memang sedang naik daun, karena seperti yang kita ketahui, saat ini orang mengakses internet mayoritas adalah dari gadget mereka. Untuk akan lebih baik jika blog atau website kita memiliki kemampuan untuk Responsive.

Tutorial ini saya dapat dari mdf-blog.blogspot.com. Dimana dia share bagaimana cara nya membuat blog kita ( Khusus blogger ) bisa menjadi Responsive Design. Saya sendiri belum mencoba si sob, tapi tips ini sudah dicoba dan work hasilnya oleh sang pembuat tips nya.

Dalam penerapanya disini kita menambahkan kode @media only screen and (max-width:800px) yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel contoh:

@media only screen and (max-width:800px)
{ #outer-wrapper {width:750px; margin:0 auto;} //ukuran tampilan website
#main-wrapper {width:750px;} //ukuran page atau isi
#sidebar-wrapper {width:750px;} //ukuran sidebar
#footer {width:750px;} //ukuran footer }

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

2. Kemudian Copy code berikut ini dan letakkan dibawah kode ]]></b:skin>
- See more at: http://kimzaqi.blogspot.com/2013/07/cara-membuat-blog-menjadi-responsive.html#sthash.qHwYApDQ.dpuf

Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas). Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar