Cara Membuat Blog Menjadi Responsive - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Blog Menjadi Responsive !! Semoga tulisan dengan kategori
Tips Blogging dan internet !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Blog Menjadi Responsive ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->
Cara Membuat Blog Menjadi Responsive - Responsive design adalah kemampuan website untuk mampu menyesuaikan tampilan template nya kedalam berbagai macam gadget yang digunakan oleh pengunjung, seperti Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda. Design Responsive saat ini memang sedang naik daun, karena seperti yang kita ketahui, saat ini orang mengakses internet mayoritas adalah dari gadget mereka. Untuk akan lebih baik jika blog atau website kita memiliki kemampuan untuk Responsive.
Tutorial ini saya dapat dari mdf-blog.blogspot.com. Dimana dia share bagaimana cara nya membuat blog kita ( Khusus blogger ) bisa menjadi Responsive Design. Saya sendiri belum mencoba si sob, tapi tips ini sudah dicoba dan work hasilnya oleh sang pembuat tips nya.
Dalam penerapanya disini kita menambahkan kode @media only screen and (max-width:800px) yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel contoh:
@media only screen and (max-width:800px)
{ #outer-wrapper {width:750px; margin:0 auto;} //ukuran tampilan website
#main-wrapper {width:750px;} //ukuran page atau isi
#sidebar-wrapper {width:750px;} //ukuran sidebar
#footer {width:750px;} //ukuran footer }
Berikut cara untuk membuat tampilan website/blog menjadi responsive:
1. Copy code berikut ini dan letakkan dibawah kode <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
2. Kemudian Copy code berikut ini dan letakkan dibawah kode ]]></b:skin>
<style>@media only screen and (min-width:768px) and (max-width:989px) {#outer-wrapper {width:730px; margin:0 auto }Kode CSS lainya}@media only screen and (max-width:767px) {#outer-wrapper {width:540px; margin:0 auto }Kode CSS lainya}@media only screen and (max-width: 580px) {#outer-wrapper { width: 500px }Kode CSS lainya}@media only screen and (max-width: 490px) {#outer-wrapper { width: 430px }Kode CSS lainya}@media only screen and (max-width: 479px) {#outer-wrapper { width: 280px }Kode CSS lainya}@media screen and (max-width: 260px) {#outer-wrapper { width: 210px }Kode CSS lainya}</style>
Kode tersebut di gunakan untuk membuat tampilan blog menjadi responsive. Untuk kode CSS-nya sobat bisa liat ID setiap elemen seperti Sidebar, main-wrapper, outer-wrapper, footer dan lain-lain karena pada setiap template ID setiap elemen bisa saja berbeda. Untuk melihat hasilnya bisa lihat disini Smart Responsive Tester for Web Designers klik tombol Lauch the tool. kemudian masukan alamat website atau blog sobat lalu klik Test.
Okey, cukup sekian tutorial Cara Membuat Blog Menjadi Responsive. Semoga bermanfaat.
Thanks to mdf-blog.blogspot.com buat tutornya.
Source
Demikian info Cara Membuat Blog Menjadi Responsive, Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi Cara Membuat Blog Menjadi Responsive ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.