Cara membuat template menjadi responsive adalah dengan menambahkan kode css yang berfungsi untuk mengadaptasi media screen yang digunakan oleh device, sehingga template tersebut bisa menyesuaikan sendiri ukuranya, sebenarnya jika kita mengaktifkan template seluler pada blogger, maka tampilan blog tentu bisa diakses oleh semua seluler atau device lainya dengan sangat mudah, dan itulah kelebihan daripada blogger yaitu sangat mobile friendly, namun jika kita tidak mengaktifkan template seluler atau mengaturnya ke template khusus, maka disitulah fungsi daripada kode css berikut ini. sebelumnya pembuat blog murah juga telah share
template blogger responsive 2014 yang sangat menarik dan langsung bisa anda pakai, namun jika sobat ingin mempertahan template sendiri dan kini ingin
membuat template tersebut menjadi responsive, berikut ini adalah langkah yang harus anda lakukan.
Kode CSS Untuk membuat responsive
Langkah pertama yaitu cari
]]></b:skin> template kamu. dan paste kode berikut ini:
@media screen and (max-width:1024px) {
kode css
}
Kode css yang berwarna merah itulah yang harus anda ganti dengan dengan id class yang ada pada template kamu, kode ID Class yang umum dipakai biasanya seperti dibawah ini:
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#header
#footer
Namun. sobat harus melihat class dari css sobat agar kode untuk membuta template menjadi responsive bekerja, karena jika classnya tidak sama dengan kode css pada tempalte kamu maka tentu perintah diatas tidak akan berfungsi. dan contoh untuk perintah responsive misalnya dibawah ini:
@media only screen and (max-width: 480px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
@media only screen and (max-width:768px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
@media only screen and (max-width: 800px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
Yang berwarna merah tersebut adalah kode untuk sreennya dan yang berwarna hitam adalah css untuk mengadaptasinya agar menjadi responsive. nah, silahkan atur sesuai class yang ada pada template sobat, dan jangan lupa menambahkan kode dibawah ini setelah kode <head> berikut kodenya:
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Demikian Kode Dasar
Membuat Template Menjadi Responsive, saya kira jika anda bisa memahaminya maka hal itu sangatlah gampang.
