Cara Menciptakan Blog Menjadi Responsive
Thursday, November 13, 2014
Add Comment
Cara Membuat Blog Menjadi Responsive - Responsive design yaitu kemampuan website untuk bisa menyesuaikan tampilan template nya kedalam banyak sekali macam gadget yang dipakai oleh pengunjung, menyerupai Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda. Design Responsive dikala ini memang sedang naik daun, alasannya yaitu menyerupai yang kita ketahui, dikala ini orang mengakses internet lebih banyak didominasi yaitu dari gadget mereka. Untuk akan lebih baik jikalau blog atau website kita mempunyai kemampuan untuk Responsive.
Tutorial ini aku sanggup dari mdf-blog.blogspot.com. Dimana ia share bagaimana cara nya menciptakan blog kita ( Khusus blogger ) bisa menjadi Responsive Design. Saya sendiri belum mencoba si sob, tapi tips ini sudah dicoba dan work jadinya oleh sang pembuat tips nya.
Dalam penerapanya disini kita menambahkan instruksi @media only screen and (max-width:800px) yang artinya ukuran tampilan website/blog dihentikan 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 menciptakan 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 instruksi ]]></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 menciptakan tampilan blog menjadi responsive. Untuk instruksi CSS-nya teman bisa liat ID setiap elemen menyerupai Sidebar, main-wrapper, outer-wrapper, footer dan lain-lain alasannya yaitu pada setiap template ID setiap elemen bisa saja berbeda. Untuk melihat jadinya bisa lihat disini Smart Responsive Tester for Web Designers klik tombol Lauch the tool. kemudian masukan alamat website atau blog teman kemudian klik Test.
Okey, cukup sekian tutorial Cara Membuat Blog Menjadi Responsive. Semoga bermanfaat.
Thanks to mdf-blog.blogspot.com buat tutornya.
Source
0 Response to "Cara Menciptakan Blog Menjadi Responsive"
Post a Comment
Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Klik subscribe by email agar Anda segera tahu balasan komentar Anda