Sedikit Info Seputar
Memahami Logika CSS Media Queries agar Layout Blog Responsive!
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Memahami Logika CSS Media Queries agar Layout Blog Responsive!, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel BLOGGER,
Artikel CSS,
Artikel Media Queries,
Artikel Responsive, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Memahami Logika CSS Media Queries agar Layout Blog Responsive!
Terbaru
link: Memahami Logika CSS Media Queries agar Layout Blog Responsive!
Berbagi Memahami Logika CSS Media Queries agar Layout Blog Responsive! Terbaru dan Terlengkap 2017
Halo, para maniac responsive web/blog design! kali ini saya akan berbagi ilmu tentang memahami logika css media queries dalam pembuatan blog agar responsive untuk tingakt lanjut ..Sebetulnya ini hal mudah jika kita berfikir nya secara simple tanpa berfikir dulu yang lain2, dalam artikel kali ini saya akan mencoba pada layout statis dimana hanya ada beberapa divisi standard pada blog, seperti : #outer-wrapper, #header-wrapper, #content-wrapper, #main-wrapper, #sidebar-wrapper, dan #footer-wrapper . seperti pada gambar di bawah ini :
Lihat layout-nya langsung Disini ( Sebelum Responsive )
Berikut contoh Struktur HTML Standard Blogger di atas :
<!DOCTYPE html>
<html>
<head>
<title>Nama Blog Kamu</title>
</head>
<body>
<div id="outer-wrapper">
<div id="header-wrapper">
#header-wrapper
</div>
<div id="content-wrapper">
<div id="main-wrapper">
#main-wrapper
</div>
<div id="sidebar-wrapper">
<div class='widget-content'>
#sidebar-wrapper
</div>
</div>
</div>
<div id="footer-wrapper">
#footer-wrapper
</div>
</div>
</body>
</html>dan berikut kode CSS Sebelum Responsive nya :
body {
background-color: #000;
color: #fff;
font-family: arial;
}
#outer-wrapper {
background: #fff;
color: #000;
margin: 0px auto;
width: 950px;
}
#header-wrapper {
background: #ff4949;
color: #fff;
margin: 10px;
padding: 10px;
clear: both;
}
#content-wrapper {
position: relative;
margin: 0px auto;
clear: both;
}
#main-wrapper {
background: #ffff65;
color: #000;
margin: 10px;
margin-right: 270px;
padding: 10px;
}
#sidebar-wrapper {
background: #b3fe3d;
color: #000;
margin: 10px;
margin-top: 0px;
position: absolute;
top: 0px;
right: 0px;
width: 250px;
height: 100%;
}
#sidebar-wrapper .widget-content {
margin: 10px;
}
#footer-wrapper {
background: #40ebfe;
color: #000;
margin: 10px;
padding: 10px;
}Bagaiman cara Membuat CSS yang Belum Responsive menjadi Responsive?
Cara Membuat Blog Responsive kali ini saya hanya menggunakan metode CSS Media Queries, yaitu menambah / mengubah value pada property CSS yang sudah ada pada ukuran layar/screen tertentu sesuai dengan standard ukuran layar terkecil, seperti: Notebook, Tablet PC, Handphone, dsb.Berikut Caranya :
1 - Simpan meta tag di bawah ini tepat setelah kode
<head> :<meta content='width=device-width, initial-scale=1.0' name='viewport'/>2 - Siapkan CSS Internal seperti dibawah ini sebelum kode
</head> :<style>
/* CSS Media Queries */
...
</style>
Catatan : Symbol Garis Miring (/) dan Bintang (*) hanya tag untuk memberikan keterangan pada CSS di atas.
3 - Kita awali dengan Bismillah tentunya, biasanya template blog memiliki lebar paling kecil 1024pixel untuk ukuran layar komputer dan notebook, nah sekarang kita loncat langsung ke ukuran PC Tablet, yang berukuran 768pixel, maka untuk menyesuaikan CSS Media Queries pada ukuran tersebut tinggal tambahkan kode
@media pada Internal CSS yang sudah kita buat pada langkah ke-2, dan tambahkan 1pixel untuk property max-width menjadi 769pixel, agar berfungsi dengan semestinya :<style>
/* CSS Media Queries */
@media (max-width:769px) {
.. Pengaturan CSS Disini pada Ukuran Layar 768pixel ..
}
</style>
4. Kita Lihat CSS Sebelum Responsive nya, lihat pada divisi #outer-wrapper disana terdapat property
width dengan value 950px (pixel) , maka kita rubah value tersebut jika di tampilkan pada layar berukuran 768pixel dalam Internal CSS yang kita setting di langkah ke-3, maka akan ditulis sebagai berikut :<style>
/* CSS Media Queries */
@media (max-width:769px) { /* Setting Pada Ukuran Layar 769pixel Disini */
#outer-wrapper { max-width:950px; width:100%; }
}
</style>
Untuk melihat hasilnya, jika sobat menggunakan Browser Firefox Terbaru tinggal tekan pada shortcut keyboard CTRL + SHIFT + M, atau jika menggunakan Browser Google chrome sobat bisa menggunakan Extensi "Window Resizer"
Berikut Hasil CSS yang sudah di set pada ukuran layar 768pixel di atas :
5. Jika Browser di Resize ke Ukuran 600pixel, rasa-nya terlalu kecil ukuran lebar untuk tampilan artikel / divisi #main-wrapper seperti screenshot di bawah ini :
Maka solusi nya yaitu kita buat lagi settingan untuk ukuran layar 600pixel, cara-nya tidak jauh seperti langkah ke-4, kita lihat kembali CSS sebelum responsive-nya, lihat css divisi #main-wrapper dan #sidebar-wrapper , setting CSS nya menjadi seperti di bawah ini :
<style>
/* CSS Media Queries */
@media (max-width:769px) { /* Setting Pada Ukuran Layar 769pixel Disini */
#outer-wrapper { max-width:950px; width:100%; }
}
@media (max-width:600px) { /* Setting Pada Ukuran Layar 600pixel Disini */
#main-wrapper { margin:10px!important; }
#sidebar-wrapper { margin:10px!important; position:relative; height:auto; width:auto; }
}
</style>
Maka hasil-nya akan seperti di bawah ini :
Selesai! ..
Berikut Referensi Ukuran Layar standard yang sering saya gunakan untuk membuat template blog agar responsive :
Semoga Bermanfaat, jika ada yang ingin ditanyakan seputar Cara Membuat Blog menjadi Responsive silahkan di tanyakan pada form komentar di bawah ini . Terima kasih sudah meluangkan waktu-nya untuk berkunjung di blog sederhana saya.
Salam Blogger, A.K.A ` Kang Rian!
Itulah sedikit Artikel Memahami Logika CSS Media Queries agar Layout Blog Responsive! terbaru dari kami
Semoga artikel Memahami Logika CSS Media Queries agar Layout Blog Responsive! yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Memahami Logika CSS Media Queries agar Layout Blog Responsive!