Sebenarnya apa sih yang dinamakan Blog yang Responsive itu? Bisa kita artikan blog responsive itu adalah blog yang mudah atau gampang merespon perubahan. perubahan dari apakah? ya tentunya perubahan dari browser dan jenis OS yang kita gunakan, blog itu harus bisa dan bisa menyesuaikan jika dibuka lewat apapun. Blog itu harus maksimal saat dibuka lewat HP, Blackbarry, Iphone, Gadget dll.
Kesimpulannya adalah Blog Responsive adalah blog yang dapat menyesuaikan
lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya,
Seperti gadget yang kita gunakan misalnya Laptop, Tablet, Smart Phone.
Tentu setiap gadget ukuran resolusi layarnya berbeda-beda ada yang
1680x1050, 1024x768, 768x1024, 320x420 dll.
Karna Blog Responsive adalah blog yang dapat menyesuaikan lebar,
tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya maka Untuk
membuat blog menjadi responsive cukup menambahkan kode @media-query pada CSS. Apa itu media query?
CSS Media query memungkinkan Anda untuk menargetkan aturan CSS
berdasarkan - misalnya - ukuran layar, perangkat-orientasi atau
display-density. Ini berarti Anda dapat menggunakan CSS Media Query
untuk men-tweak CSS untuk iPad, printer atau membuat situs responsif.
Lengkapnya tentang CSS Media query selain pada topik ini (template
responsif) dapat dibaca
disana.
Jadi, untuk membuat blog tampil responsif, kita akan membuat CSS Media
query terlebih dahulu lalu menyisipkannya kedalam template.
"ini sulit ya?"
Oh no!, ini sangat mudah man, santai saja anda akan mengerti jika anda belajar dan menyelesaikan bacaan ini.
Beruntungnya anda tidak perlu mempelajari semua tentang media query,
tapi cukup memahami media query standar berbagai perangkat. Berikut
silahkan dipahami:
1. Pedoman Media Queries diberbagai perangkat
/* Smartphones (portrait dan landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /*
gaya Css responsive */ }
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) { /*
gaya Css responsive anda */ }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { /*
gaya Css responsive anda */ }
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /*
gaya Css responsive anda */ }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /*
gaya Css responsive anda */ }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /*
gaya Css responsive anda */ }
/* Media untuk layar komputer atau laptop ----------- */
@media only screen and (min-width : 1224px) { /*
gaya Css responsive anda disini */ }
/* layar besar ----------- */
@media only screen and (min-width : 1824px) { /*
gaya Css responsive anda */ }
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /*
gaya Css responsive anda */ }
Catatan: Media quuery diatas boleh digunakan semua atau beberapa saja juga boleh tergantung kebutuhan setia anda. Yang warna merah
adalah komentar / penjelasan tentang pada perangkat berukuran apa saja
dia akan bekerja (tidak ditulis juga tidak masalah). Sedangkan yang
berwarna hitam tebal " gaya Css responsive anda" adalah kode style / css responsive yang akan menentukan tampilannya.
2. Komponen - Struktur Template Blog
Seperti saya katakan diatas, anda setidaknya mengetahui dasar-dasar pada
HTML blogger karna usaha yang akan kita lakukan adalah berenang
kedalam lautan kode-kode HTML pada template blogger...dan tentu saja,
ulasan mengenai ini tidak akan bisa diceritakan pada halaman ini,
disarankan untuk kembali membuka buku atau rajin bertanya kepada Om
google,
jika tidak? anda akan tenggelam dan terjatuh tak bisa bangkit lagi
*cakra khan :D. Misalnya nih, anda menemukan bagian <div id="
keongracun">blalalala teks dan blablalalallaa </div> maka itu adalah komponen
keongracun.
Kita ambil contoh Pada template ini, strukturnya dibuat dengan komponen dasar:
header
botmenu
Pengantar
Content
right
footer
3.Membuat Css Media Query responsive pada Template
Setelah mengetahui komponen dalam struktur template diblogger anda, mari
memasaknya agar siap hidang :D, maksud saya membuat @media query nya
gitu loh :)...
Pada contoh ini, Kita akan mengatur tampilan blog pada perangkat
berlayar seksi atau kecil dengan lebar 320px atau lebih kecil.
Langsung kita pasangkan sesuai dengan contoh komponen dan struktur
template diatas, maka css query agar template menjadi responsive bisa
jadi sebagai berikut:
/* Inilah gaya blog responsive dihape anda berukuran kecil ----------- */
@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:100%} }
atau bisa juga
@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:320px} }
Width pada style diatas mengatur lebarnya komponen, bisa diedit sesuai
keinginan. Ini hanya contoh dasar saja, anda masih bisa membuatnya lebih
oke, menambahkan style yang lainnya pada komponen tertentu, misalnya
kita akan menyembunyikan komponen #
botmenu, maka tambahkan saja stylenya menjadi:
@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}
#botmenu{display:none} }
Artinya :
display:none menjelaskan bahwa komponen bootmenu tidak ditampilkan pada perangkat dengan lebar
320px kebawah.
Ingin memaksimalkan pengetahuan anda, saya rekomendasikan membuka pelajaran dasar css di
www.w3schools.com/css/
4. Langkah terakhir adalah Menyisipkan Css Responsive Kedalam Template
Langkah Terakhir Modifikasi Template blogger Menjadi Rensponsive adalah
menyisipkan kode css responsive yang telah kita buat tadi (
Media Query) kedalam Template blogger anda.
Dimanakah
Media Query diletakkan?
Seperti biasa, masuk ke edit HTML template anda.
Letakkan didalam tempat kode style ...saya tidak menganjurkan anda
menggunakan CTRL+F, tapi cari dan temukan manuali, untuk ketepatan dan
kerapian mengingat blogger tampilan baru sekarang membungkus beberapa
komponen.
Biasanya style dalam temlapte blogger jika terbungkus akan seperti ini
<style>...</style>.
Cari dan Temukan, biasanya tidak jauh, paling beberapa baris dibawah
header, dan ingat SAYA TIDAK MENGANJURKAN ANDA UNTUK menggunakan CTRL+F
karna akan ada banyak, jadi usahakan
anda temukan secara manual.
Setelah menemukan <style>...</style> klik (yang diklik adalah titik-titik ...) antara pembuka dan penutup style tersebut. Jika itu benar maka style akan membuka.
letakkan Media Query yang telah kita siapkan tadi tepat dibagian paling bawah style terbuka tersebut, sebelum penutup </style>.
Contoh peletakkan:
<style>
#cssblalalalalala{..}
#lain-lain{...}
@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }
</style>
Nah sekian tutorial cara membuat blog Responsive dengan mudah.... semoga bermanfaat.
Search: tutorial responsive, cara agar responsive, trik modifikasi, trik blog responsive, cara mudah, supaya responsive
