Kali ini saya akan memberikan solusi untuk sobat yang belum mengetahui bagaimana cara membuat blog sobat menjadi full responsive. Blog responsive adalah blog yang mengikuti tampilan device/gadget yang digunakan pengunjung. Device/gadget yang dimaksud macam desktop (laptop/computer), tablet, handphone yang pasti memiliki ukuran yang berbeda-beda. Hal dasar yang perlu diketahui dalam membuat template responsive adalah mengubah satuan pixel (px) menjadi satuan persen (%), lalu kita tentukan ukuran-ukurannya pada media queries yang akan saya bagian di bawah ini, namun sebelumnya kita buka dulu sedikit rahasia mengubah template blog menjadi responsive.
Apakah seluruhnya harus mengubah satuan pixel menjadi satuan persen?
Sebenarnya tidak harus semuanya diubah ke satuan persen. Misalkan, di template blog yang saya gunakan ini, pada bagian content-wrapper yang membungkus main-wrapper dan sidebar-css, memang saya memberi satuan persen pada keduanya. Tetapi untuk menanggulangi kemungkinan-kemungkinan yang dapat merusak tampilan pada sidebar blog nanti, maka di dalam sidebar-css saya tambahkan pembungkus baru berupa sidebar1, sidebar2 dan seterusnya dengan ukuran 300px. Dengan begitu, sampai pada jenis device terkecil pun (jelas handphone) ukuran sidebar tetap berada pada skala 300px.
Media queries kerangka untuk membuat template blog full responsive
Berikut ini media queries yang saya janjikan di atas. Media queries berikut ini adalah untuk device terbaru saat ini.
Sebenarnya tidak harus semuanya diubah ke satuan persen. Misalkan, di template blog yang saya gunakan ini, pada bagian content-wrapper yang membungkus main-wrapper dan sidebar-css, memang saya memberi satuan persen pada keduanya. Tetapi untuk menanggulangi kemungkinan-kemungkinan yang dapat merusak tampilan pada sidebar blog nanti, maka di dalam sidebar-css saya tambahkan pembungkus baru berupa sidebar1, sidebar2 dan seterusnya dengan ukuran 300px. Dengan begitu, sampai pada jenis device terkecil pun (jelas handphone) ukuran sidebar tetap berada pada skala 300px.
Media queries kerangka untuk membuat template blog full responsive
Berikut ini media queries yang saya janjikan di atas. Media queries berikut ini adalah untuk device terbaru saat ini.
@media screen and (max-width:1216px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:1024px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:992px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:880px){
. /* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:768px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:736px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width: 667px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:600px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:568px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:480px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:414px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width: 375px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:320px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:240px){
/* kode css yang ingin diubah ukurannya disini */
}
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:1024px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:992px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:880px){
. /* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:768px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:736px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width: 667px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:600px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:568px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:480px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:414px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width: 375px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:320px){
/* kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:240px){
/* kode css yang ingin diubah ukurannya disini */
}
Akan tetapi anda tidak perlu menggunakan semuanya untuk membuat template full responsive, cukup ambil yang dibutuhkan blog dan buang yang tidak begitu berpengaruh terhadap ukuran-ukuran kerangka yang membangun template.
Bagaimana jika desktop yang digunakan lebih dari 14 inch?
Nah, inilah hal lain yang perlu diperhatikan dalam meresponsive template. Biasanya kita (apalagi saya) mendesign sebuah blog itu pada tampilan desktop berukuran 14 inch. Biasanya akan lupa ukuran tampilan di desktop yang lebih besar dari itu, macam desktop ukuran 15 inch, 17 inch, 27 inch atau ukuran yang lebih besar lainnya. Maka cara mengantisipasi agar tampilan template blog tidak berantakan adalah membatasi lebar maksimal. Contohnya seperti di bawah ini.
Bagaimana jika desktop yang digunakan lebih dari 14 inch?
Nah, inilah hal lain yang perlu diperhatikan dalam meresponsive template. Biasanya kita (apalagi saya) mendesign sebuah blog itu pada tampilan desktop berukuran 14 inch. Biasanya akan lupa ukuran tampilan di desktop yang lebih besar dari itu, macam desktop ukuran 15 inch, 17 inch, 27 inch atau ukuran yang lebih besar lainnya. Maka cara mengantisipasi agar tampilan template blog tidak berantakan adalah membatasi lebar maksimal. Contohnya seperti di bawah ini.
.outer-wrapper {width:85%;max-width:1240px}
max-width:1240px ini bertujuan untuk membatasi lebar template sampai pada 1240px saja pada semua ukuran desktop. Contoh di atas untuk template blog yang seluruh elemen blog yang lebarnya (width) berpatokan pada pembungkus .outer-wrapper tersebut.
Apa lagi hal lain yang diperlukan dalam membangun template full responsive?
Bagi pemula mungkin akan merasa kesulitan membuat template full responsive, tetapi sebenarnya sangat mudah untuk menerapkan hal ini. Penempatannya pun cukup sederhana, jika action tampilan berada di conditional tertentu maka anda harus menempatkan kode media queries ini pada conditional tersebut. Contoh conditional seperti di bawah ini.
Apa lagi hal lain yang diperlukan dalam membangun template full responsive?
Bagi pemula mungkin akan merasa kesulitan membuat template full responsive, tetapi sebenarnya sangat mudah untuk menerapkan hal ini. Penempatannya pun cukup sederhana, jika action tampilan berada di conditional tertentu maka anda harus menempatkan kode media queries ini pada conditional tersebut. Contoh conditional seperti di bawah ini.
<b:if cond='data:blog.pageType != "item"'>
Selain itu, anda harus menempatkan meta tag di bawah ini di bawah kode <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
