Mas Uya

Cara Membuat Template Blogger Responsive Sendiri (1 Kolum)

Halo semuanya,Dihari selasa ini saya akan membuat post yang berjudul Responsive ala Mas Uya..
Jujur saja semakin banyak pengguna smartphone,Semakin canggih juga desain web sekarang..
Ada yang responsive dan ada juga yang menggunakan fitur mobile..
Nah di postingan ini saya akan membahas Responsive Ala Mas Uya.Oke langsung aja kita mulai

Sedikit penjelasan tentang Responsive:
adalah pendekatan desain web yang ditujukan untuk kerajinan situs untuk memberikan pengalaman-mudah dilihat membaca optimal dan navigasi dengan minimal ukuran, panning, scrolling dan-di berbagai perangkat (dari ponsel ke komputer desktop monitor)

Oke,saya akan kasih tau bagaimana saya buat template responsive..

Disini saya membuat template ada 2 versi:
1.1 Kolom
Biasanya di template saya yang 1 kolom itu pembungkusnya adalah <div id='tumpas-wrapper> Dan itu berada di bawah <body> , Dan contoh cssnya seperti berikut:

#tumpas-wrapper{width:768px; margin:0 auto; background:slategrey; padding:5px}

Ingat widht:789 itu ada pada tampilan desktop.Bagaimana agar tampilannya pas dengan semua smartphone?
Lihat css media quires ini

@media screen and (max-width:800px){#tumpas-wrapper{width:100%; border:0px solid #eee; padding:0px}
}

Kenapa hanya 800px?
Karena yang hanya menjadi masalah pada ukuran device 800px dan pada kode media query, ukuran device paling besar akan diikuti oleh yang lebih kecil. Misalkan anda membuat kode responsive dari 1024px, kode itu juga akan berlaku pada ukuran 768px, 600px, dan lebih kecil lagi.

2.2 Kolom
Biasanya ditemplate saya yang 2 kolom itu pembungkusnya adalah <div id='surya-body'> Berada di bawah <body> , Dan <aside id='surya-posting'> Berada tepat di atas <div class='main section' id='main'> , Dan Contoh CSS nya adalah seperti berikut:

#surya-body{width:1000px; margin:10px auto; overflow:hidden; background:rgba(234,234,234,0.42); box-shadow:0 0 1px #B3AFAF}
#surya-posting{width:700px; overflow:hidden; float:left}

Lalu Bagaimana Cara Membuat Responsivenya?
Berikut CSS yang saya gunakan di template 2 kolom saya,Seperti Berikut:


@media screen and (max-width:1005px){#surya-body{width:100%}
#surya-posting{width:70%}
#sidebar-wrapper{width:30%}
}
@media screen and (max-width:885px){.post-outer{margin:5px 5px 0 0}
}
@media screen and (max-width:800px){.post-outer{max-width:100% !important; width:100% !important; float:none !important; margin:5px 0 15px 0}
#sidebar-wrapper{width:35%}
#surya-posting{width:65%}
#header1, #header2{width:100%; float:none; text-align:center; max-width:100%}
#main{padding:10px}
.breadcrumbs{margin:0px}
}
@media screen and (max-width:600px){#surya-posting,#sidebar-wrapper{width:100%; float:none}
#atas .kiri, #atas .kanan, #footer-1, #footer-2, #footer-3{float:none; width:100%; max-width:100%}
#atas .kanan{border-top:1px solid #eee; padding:5px}
#kotak-cari{width:80%}
.suryamenu{display:none}
#nav2{display:inherit}
}
@media screen and (max-width:500px){.comments .avatar-image-container{display:none}
.comments .comment-block{margin-left:0px}
}

Nah ingat jika kalian ingin mengcopy css saya,ingat dahulu pembungkus sobat apa? dan ada berapa?
Biasanya terdapat 2 pembungkus
Oke,Itulah Responsive Template Ala Mas Uya,Jika ingin bertanya silahkan berkomentar
Semoga Menjadi Design Template Blog Yang Handal Ya Sobat,Salam Blogger