Pengenalan
CSS biasa dengan CSS reponsive tidak lah berbeda, hanya saja pada CSS reponsive awalnya memiliki pengkondisian ukuran width dengan kode @media screen and (max-width:ukuranwidth){#CSS{}}. Pada ukuranwidth diisi dengan ukuran width device yang akan diatur dan #CSS diisi dengan CSS yang akan diatur jika pengkondisian benar terjadi. CSS Responsive ini bisa diletakkan di bawah kode penutup CSS biasa </b:skin> dengan diawali dengan <style> dan ditutup dengan </style> contoh.</b:skin>
<style>
@media screen and (max-width:ukuranwidth){
#CSS{..............}
}
</style>
Buat Responsive
Tutorial ini akan dimulai dengan pengkondisian device dengan ukuran width 320px. Sebelumnya buat terlebih dahulu rumus umumnya di bawah kode </b:skin>.@media screen and (max-width:ukuranwidth){
#CSS{..............}
}
Setelah itu, kita buat kondisi pada maksimal width 320px
@media screen and (max-width:320px){
#CSS{................}
}
Buatlah CSS #outer-wrapper jika pada ukuran device 320px, ukuran widthnya menjadi 318px. Masukkan ke rumus umum, wkwk 'rumus umum'
@media screen and (max-width:320px){
#outer-wrapper{width:318px;}
}
Tambahkan lagi kondisi #main-wrapper jika pada ukuran device 320px, ukuran widthnya menjadi 316px dan float value nya menjadi none. Value none pada float akan membuat elemen tersebut tidak akan berhimpit lagi dengan elemen lain.
@media screen and (max-width:320px){
#outer-wrapper{width:318px;}
#main-wrapper{width:316px;float:none;}
}
Yang terakhir kemudian CSS #sidebar akan dibuat kebawah dengan Value float nya none dan ukuran width penuh di layar yaitu width:316px sama seperti #main-wrapper
@media screen and (max-width:320px){
#outer-wrapper{width:318px;}
#main-wrapper{width:316px;float:none;}
#sidebar{width:316px;float:none;}
}
Setelah itu bisa disave, dan dapat dicoba dengan melihat hasil di situs responsivetest.com
Elemen yang lain bisa anda atur sendiri dan kondisi ukuran width yang berbeda bisa anda tambahkan. Kalau semua sudah siap, anda bisa menonaktifkan mobile version pada template blog anda,dengan cara
2. Di bagian seluler, sesuaikan template seluler menjadi seperti gambar dibawah
3. Ganti menjadi khusus
Dan bagi yang agak malas utak atik CSS, bisa gunakan cara dibawah ini. :)
2. Masukkan kode berikut diatas ]]></b:skin>
@media screen and (max-width: 1230px){
#header { float:none; max-width:none; text-align:center; }
#header-inner { margin-bottom:0px; }
#header h1 { margin-right:0px; }
#header p.description { margin:0; }
#header-right { position:relative; right:0; text-align: center; margin : 0 !important; }
.header-right-inner { margin: 0 30px ! important; }
.main-nav-top{ clear:both; float:none; }
.main-nav-main { margin:10px 0 0 0; }
#nav-search { float:none; margin:0; }
}
@media screen and (max-width: 960px) {
.sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; }
.subscribe_outer { margin: 0 -20px; }
.main-wrapper{ margin-right:0; width:100%; min-height: 0px; }
.ct-wrapper{ padding:0 15px; }
#content { padding: 5px; clear: both; border-radius: 0; }
.sidebar-wrapper .sidebar{ margin: 15px; }
.sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; }
}
@media screen and (max-width: 768px){
.header-wrapper { margin-right: 0; min-height: 0; width: 100%; }
#header { text-align: center; width: 100%; max-width: none; }
#header-inner { margin:30px 0 0; }
#header h1 { font-size:35px; }
.main-nav-top, .main-nav-main, .main-nav-top ul, .main-nav-main ul{ text-align:center; }
.related-post { width:auto; }
#comment-editor { margin:10px; }
.footer { margin:15px; width:auto; }
.footer-credits .attribution{ display:none; }
}
@media screen and (max-width: 500px){
#header img { width:100%; }
}
@media screen and (max-width: 420px){
#header h1 { font-size: 30px; margin: 10px; }
.main-nav-main ul li{ margin:4px 10px; float:none; }
.comments .comments-content .datetime{ display:block; float:none; }
.comments .comments-content .comment-header { height:70px; }
}
@media screen and (max-width: 320px){ .ct-wrapper{ padding:0; }
.footer .footer-inner { padding: 45px 10px 10px 10px; }
.comments .comments-content .comment-replies { margin-left: 0; }
}
Nb: perlu diingat bahwa penamaan sebuah elemen pada masing-masing template itu berbeda-beda, maka sebelum di-save yakinkan bahwa nama elemennya sudah benar, kalau tidak justru template anda jadi kocar-kacir,,hehehehehe....
