Membuat Template Responsive @Media Screen

Cara Membuat Semua Template / Themes Menjadi Responsive dengan @Media Screen atau @Media saja, sekarang banyak sekali yang bisa membuat template tetapi susah sekali untuk membuat template tersebut untuk menjadi Responsive dan baik di lihat di semua Jenis Ponsel/Pc komputer dan Laptop.
dan bagaimana dengan cara mengecek apakah template anda Responsive atau tidak ??

Cara Mengecek Template Blog Responsive di blog

Coba klik Windows mode atau Standar mode pada browser anda dan sesuaikan ukurannya, cara saya ini sangatlah gampang dan juga bisa langsung mengedit tanpa harus kesana kemari untuk melihat blog kita sendiri.

Membuat Template Menjadi Responsive dengan @media Screen

1. Pertama kita berikan dulu meta tag ini di bawah kode </head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Perhatian MS Internet Explorer versi older atau yang lama tidak support tag di atas silahkan saja bantu dengan support Respond Javascript maupun media queries javasript di IE dengan meta tag berikut :

<!--[if lt IE 9]>   
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

2. dengan mengubah ukuran pixel px dengan manjadi ukuran persen seperti di bawah ini

.sidebar{
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}

3.kemudian sekarang memakai versi @media Screen langsung saja cekidot contohnya

@media screen and (max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}

pada @media screen silahkan ubah Max-widthnya karena yang 768 itu disesuaikan pada iPad
Jika ingin Mengubahnya pada Max width yang lain silahkan ganti 768 menjadi yang lebih kecil lagi dari sebelumnya

Dan itulah Cara Membuat Template Blogger bisa Juga Wordpress dan Fansub untuk menjadi Responsive dengan baik, semoga templatenya jadi Responsive ya

Download Juga Template Ramadhan Seo Terbaru 2015 Responsive lagi :D ada juga Akabane karma dan Nagisa Template Responsive Grid

Tag : Blogger, Blogging, Cara, Tutorial