Cara Mengatur Halaman Blog Agar Responsive - Responsive atau "RESPON"
berarti menerima dan dapat menyesuaikan diri terhadap hal-hal yang
diterima serta dapat mengatur letaknya sesuai dengan dimana halaman
tersebut terbuka sebagai tempat. Responsive bisa juga diartikan sebagai
fleksibel area halaman blog, jika halaman dibuka pada resolusi layar
yang kecil, maka tampilan halaman blog akan mengikuti lebar layar yang
Anda gunakan saat membuka halaman blog saat ini. Sebagai contoh coba
Anda minimalkan ukuran layar monitor Anda saat ini, maka secara otomatis
halaman akan ikut menyusut mengikuti resolusi layar, hal inilah yang
disebut dengan Responsive Page.
Bukan hanya itu, bahkan sebuah website dituntut harus mampu malakukan pendekatan untuk mengatur hasil tampilan halaman yang menunjukkan bahwa desain dan perkembangan dapat merepon dan tanggap pada perilaku pengguna berdasarkan ukuran, platform dan orientasi layar secara otomatis. Dengan kata lain sebuah website harus memiliki sistem teknologi otomatis untuk dapat merespon preferensi pengguna berdasarkan resolusi layar yang digunakan seperti Komputer PC, Laptop, Netbook, Tablet, SmartPhone dan Mobile Phone.
Top Artikel - CSS Flower Navigasi Efek Rotasi
Tidak semua ukuran resolusi layar pada perangkat yang Anda gunakan sama, semua memiliki lebar dan tinggi yang berbeda-beda, untuk itu kita perlu mengatur halaman blog agar responsive, sehingga letak dan layout halaman tetap dalam tampilan yang rapi dimanapun halaman tersebut terbuka dengan menambahkan kode @media-screen, contoh seperti ini:
Dengan pengaturan @media-layout diatas, maka jika halaman blog terbuka pada resolusi layar yang kurang dari 800px, halaman akan secara otomatis berubah tampilan menjadi 1 kolom full, contohnya pada layar tablet atau mobile phone yang memiliki ukuran layar yang cukup kecil, sehingga tampilan halaman akan menempatkan kolom sidebar dibawah setelah halaman posting secara sejajar dalam 1 kolom.
Berikut Cara Mengatur Halaman Blog Agar Responsive
1. Penempatan Kode
1.1. Tag Meta Responsive
Temukan kode <head> pada Template Anda, lalu letakkan kode ini dibawahnya:
1.2. CSS Lay Out Media
Kemudian letakkan kode berikut pada HTML Template Anda sesuai elemen id pada area masing-masing untuk mengatur lebar tampilan halaman yang responsive seperti ini:
2. Penyesuaian Kode
Pengaturan kode ini saya ambil langsung untuk mengatur halaman blog ini agar responsive, bahkan letak menu navigasi, kolom pencarian dan tombol share semua sudah saya atur agar responsive yang artinya elemen ID untuk halaman yang saya gunakan belum tentu sama seperti yang Anda gunakan, jadi silahkan Anda sesuaikan terlebih dahulu ID apa yang Anda gunakan untuk mengatur letak halaman pada Template Anda. Contoh seperti kode ini:
Nah jika sudah ketemu, Anda bisa tambahkan pada pengaturan media-screen pada masing-masing area pada CSS diatas, mudah bukan..!!! hehe.... semoga artikel ini dapat membantu sahabat semua pecinta SAHABAT BLOGGER 77 dalam mengatur halaman blog yang responsive dengan tampilan yang rapi. Happy blogging.
Bukan hanya itu, bahkan sebuah website dituntut harus mampu malakukan pendekatan untuk mengatur hasil tampilan halaman yang menunjukkan bahwa desain dan perkembangan dapat merepon dan tanggap pada perilaku pengguna berdasarkan ukuran, platform dan orientasi layar secara otomatis. Dengan kata lain sebuah website harus memiliki sistem teknologi otomatis untuk dapat merespon preferensi pengguna berdasarkan resolusi layar yang digunakan seperti Komputer PC, Laptop, Netbook, Tablet, SmartPhone dan Mobile Phone.
Top Artikel - CSS Flower Navigasi Efek Rotasi
Tidak semua ukuran resolusi layar pada perangkat yang Anda gunakan sama, semua memiliki lebar dan tinggi yang berbeda-beda, untuk itu kita perlu mengatur halaman blog agar responsive, sehingga letak dan layout halaman tetap dalam tampilan yang rapi dimanapun halaman tersebut terbuka dengan menambahkan kode @media-screen, contoh seperti ini:
//halaman hanya akan tampil dengan lebar maksimal 800 piksel
@media only screen and (max-width:800px) {
//pengaturan halaman full (1, 2 atau 3 kolom)
#outer-wrapper {width:750px; margin:0 auto;}
//halaman posting (jika pada mobile phone akan tampil individu)
#main-wrapper {width:750px;}
//layout sidebar
#sidebar-wrapper {width:750px;}
//layout kolom footer
#footer {width:750px;}
}
@media only screen and (max-width:800px) {
//pengaturan halaman full (1, 2 atau 3 kolom)
#outer-wrapper {width:750px; margin:0 auto;}
//halaman posting (jika pada mobile phone akan tampil individu)
#main-wrapper {width:750px;}
//layout sidebar
#sidebar-wrapper {width:750px;}
//layout kolom footer
#footer {width:750px;}
}
Dengan pengaturan @media-layout diatas, maka jika halaman blog terbuka pada resolusi layar yang kurang dari 800px, halaman akan secara otomatis berubah tampilan menjadi 1 kolom full, contohnya pada layar tablet atau mobile phone yang memiliki ukuran layar yang cukup kecil, sehingga tampilan halaman akan menempatkan kolom sidebar dibawah setelah halaman posting secara sejajar dalam 1 kolom.
Berikut Cara Mengatur Halaman Blog Agar Responsive
1. Penempatan Kode
1.1. Tag Meta Responsive
Temukan kode <head> pada Template Anda, lalu letakkan kode ini dibawahnya:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
1.2. CSS Lay Out Media
Kemudian letakkan kode berikut pada HTML Template Anda sesuai elemen id pada area masing-masing untuk mengatur lebar tampilan halaman yang responsive seperti ini:
<style type='text/css'>
@media only screen and (min-width:768px) and (max-width:999px){
#outer-wrapper{width:754px}
#main-wrapper{width:60%}
#sidebar-wrapper{width:40%}
#headnya{max-width:260px;min-width:250px}
#head-ads .widget{margin:15px 0}
#header h1,#header p{padding:15px 0 0;font-size:240%}
#header .description{padding:0 0 10px}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:767px){
#outer-wrapper{width:440px}
#sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
#isifooternya .footer-wrap{width:100%}
#nav{...}
#search-result-container{width:100%}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:479px){
#outer-wrapper{width:310px}
#header h1,#header p{font-size:230%}
//tambahkan elemen id lainnya disini...
}
@media only screen and (min-width:768px) and (max-width:999px){
#slides ul{height:200px}
#slides h4{font-size:15px}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
.post-outer{width:100%}
.post{width:370px}
.blog-posts.hfeed::before{left:27px}
.post-body p{overflow:visible}
.post h2.post-title{height:auto;}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:479px){
#slides ul{height:450px}
.post{width:228px}
.post h2.post-title{max-height:200px;}
.post-body p{font-size:11px;padding:0}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:479px){
#social-side2{padding:0}
#social-side2::before{content:""}
//tambahkan elemen id lainnya disini...
}
</style>
@media only screen and (min-width:768px) and (max-width:999px){
#outer-wrapper{width:754px}
#main-wrapper{width:60%}
#sidebar-wrapper{width:40%}
#headnya{max-width:260px;min-width:250px}
#head-ads .widget{margin:15px 0}
#header h1,#header p{padding:15px 0 0;font-size:240%}
#header .description{padding:0 0 10px}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:767px){
#outer-wrapper{width:440px}
#sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
#isifooternya .footer-wrap{width:100%}
#nav{...}
#search-result-container{width:100%}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:479px){
#outer-wrapper{width:310px}
#header h1,#header p{font-size:230%}
//tambahkan elemen id lainnya disini...
}
@media only screen and (min-width:768px) and (max-width:999px){
#slides ul{height:200px}
#slides h4{font-size:15px}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
.post-outer{width:100%}
.post{width:370px}
.blog-posts.hfeed::before{left:27px}
.post-body p{overflow:visible}
.post h2.post-title{height:auto;}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:479px){
#slides ul{height:450px}
.post{width:228px}
.post h2.post-title{max-height:200px;}
.post-body p{font-size:11px;padding:0}
//tambahkan elemen id lainnya disini...
}
@media only screen and (max-width:479px){
#social-side2{padding:0}
#social-side2::before{content:""}
//tambahkan elemen id lainnya disini...
}
</style>
2. Penyesuaian Kode
Pengaturan kode ini saya ambil langsung untuk mengatur halaman blog ini agar responsive, bahkan letak menu navigasi, kolom pencarian dan tombol share semua sudah saya atur agar responsive yang artinya elemen ID untuk halaman yang saya gunakan belum tentu sama seperti yang Anda gunakan, jadi silahkan Anda sesuaikan terlebih dahulu ID apa yang Anda gunakan untuk mengatur letak halaman pada Template Anda. Contoh seperti kode ini:
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#main-wrapper
#sidebar-wrapper
Nah jika sudah ketemu, Anda bisa tambahkan pada pengaturan media-screen pada masing-masing area pada CSS diatas, mudah bukan..!!! hehe.... semoga artikel ini dapat membantu sahabat semua pecinta SAHABAT BLOGGER 77 dalam mengatur halaman blog yang responsive dengan tampilan yang rapi. Happy blogging.
0 komentar:
Post a Comment