Salam onklik, Templates/themes menjadi salah satu faktor penting dalam proses pembuatan sebuah blog, layaknya sebuah rumah templates harus ditata dengan rapi, beraturan, user friendly dan responsive sehingga akan memberikan kesan elagan serta kepuasan tersendiri bagi para pengunjung yang datang pada web atau blogsite anda, secara tidak langsung hal tersebut sudah memberikan nilai tambah bagi blog anda untuk sekedar di Bookmark atau bahkan wajib dikunjungi tiap hari :). Seiring berjalannya waktu perkembangan dunia Internet sudah begitu luar biasa, akses internet pun tidak hanya dinikmati lewat media seperti PC/Notebook saja, penggunaan internet dari media seperti Gadget, Smart Phone dan Ponsel mini yang support GPRS malahan melonjak pesat,hal tersebut dikarenakan mobilitas para pengguna layanan Internet sangatlah Padat.
Oleh karena itu seorang blogger harus benar-benar memanfaatkan peluang tersebut untuk menyambut kedatangan para pengunjung kerumah blogsitenya. Memang urusan KeyWord, Postingan serta Submit-mensubmit masih memegang kendali, namun para visitor juga membutuhkan sebuah tampilan yang responsive, user friendly, fast loading serta tampak rapi diberbagai media (PC/Notebook, Gadget, Smart Phone dan lainnya) sehingga membuat mereka betah berlama-lama dihalaman bogsite kita.
Pada artikel kali ini saya akan berbagi tentang bagaimana kita membangun sebuah template Responsive bagi anda para penggunan CMS WordPress Self Hosted. Untuk pembuatan dasarnya dibagi menjadi dua bagian berbeda, anda dapat memilih salah satunya untuk mewujudkan template responsive idaman anda.
1. Menambahkan TAG @media
@media screen and (min-device-width: 480px) and (orientation: landscape) {
body {
font-size: 100%;
}
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body {
font-size: 90%;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Cara ini dapat anda coba jika memang anda telah memiliki sebuah template yang tak ingin diganti tampilannya, kekurangan dari cara ini terletak pada struktur dari pengaturan setiap halaman (kesannya seperti dipaksakan) akibatnya kurang begitu rapi, tapi tetap responsive kok, soalnya setiap halaman terload dengan sempurna disetiap Device.
2. Menyusun Struktur Widt Height di CSS dengan % / em
Hampir sebagian CSS template yang kita temui memakai struktur pengaturan lebar & tinggi menggunakan Pixel (px), sebenarnya hal tersebut menjadi penyebab utama Responsibilas sebuah halaman, dikarenakan kita telah menentukan ukuran yang permananen. Untuk mengatasi hal tersebut sebaiknya gunakan parameter persen (%) atau (em) dalam mengatur ukuran lebar, tinggi, font dan lainnya. Ketika menggunakan paramater yang saya sebutkan diatas pasti akan timbul pertanyaan “Bagaiman jika ukuran layarnya besar? apa ga kegedaan tu tampilan web” untuk mengatasi hal tersebut jangan lupa sandingkan jug max size dengan menggunakan parameter Pixel, sebagai contoh berikut dasar code pembangunan sebuah responsive tempalte.
/* Body diatur dengan ukuran 100% device*/
#body{
margin: 0 auto;
padding: 20px 0;
width:100%;
}
/* wrapper diatur 100% dengan ukuran max 960px */
#wrapper{
margin: 0 auto;
padding: 20px 0;
width:100%;
max-width:960px;
}
/* Gambar diatur dengan ukuran 25% lebar device */
#img{
max-width:25%;
height:auto;
}
Code diatas sebagai dasar pengaturan yang responsive, penggunaan parameter % akan membuat halaman blog anda dapat menyesuaikan ukuran halaman dengan media yang mengakses blog anda, untuk artikel berikutnya saya akan membagaikan sebuah template Responsive yang sedang saya bangun.
NB : template onklik juga belum responsive :), sayang ninggalin hasil karya jadi lagi ngebangun yg baru untuk onklik.com, akhir kata selamat mencoba, salam onklik 🙂
