Membuat Blog Menjadi Responsiv #1

Membuat Blog Menjadi Responsiv-hari ini saya akan belajar membuat tampilan template blog menjadi responsiv jika di buka dari perangkat apa saja, seperti smartphone, laptop, pc, tablet, maupun hp biasa.

Ini saya belajar untu #1, 


Media Queries 

Contoh; Misalnya --> smartphone

/* Smartphones (portrait dan landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* gaya Css responsive */ } 

Di gaya penulisan css inilah kita akan meletakan gaya css yang kita inginkan, gak di kasi juga gak papa kalau hanya untuk mengatur ukuran tampilan template.

CARA MELETAKAN DI TEMPLATE

Letakan di kode <style>..kode @media disini..</style>

Gaya yang akan di buat yaitu;

header

botmenu

Pengantar

Content

right

footer

@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:100%} }

Atau bisa di tulis;................

@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:320px} }

Width pada style diatas mengatur lebarnya komponen, bisa diedit sesuai keinginan. Ini hanya contoh dasar saja, anda masih bisa membuatnya lebih oke, menambahkan style yang lainnya pada komponen tertentu, misalnya kita akan menyembunyikan komponen #botmenu, maka tambahkan saja stylenya menjadi:

@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }

Artinya : display:none menjelaskan bahwa komponen bootmenu tidak ditampilkan pada perangkat dengan lebar 320px kebawah.

CONTOH PELETAKAN

<style>
#cssblalalalalala{..}
#lain-lain{...}
@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }
</style>

Hari ini cukup dulu belajar "Membuat Blog Menjadi Responsiv", semoga Allah swt memberikan saya kekuatan untuk terus melanjutkan belajarnya, Aamiin.

sumber: blog.fispol.com/2013/06/cara-Membuat-template-responsive-blogger.html