 |
| Gambar dari github.io |
Namun, bagaimana dengan template yag belum responsive? Bagaimana caranya? ikuti langkah-langkah di bawah ini.
Cara Membuat Template Menjadi Responsive
Untuk template website anda menulias seperti halnya menulis CSS pada umumnya. Sementara yang menggunakan Blogger, yang perlu anda lakukan hanya meletakan kodenya didalam
]]></b:skin>.Contoh Kode:
@media only screen and (max-width: 720px){
#outer-wrapper {
width: 100%;}
#header-wrapper {
width: 100%;
padding: 0;
margin: 0;}
.slides {
background-image: none;
}
Maksut kode diatas adalah pada layar ukuran 720px, outer-wrapper diatur lebar 100% agar ukurannya dapat menyesuaikan ukuran layar gadget, header-wrapper diatur lebarnya 100% memiliki batas dalam 0px dan batas luar 0px, dan slides diatur gambar background tidak terlihat.Yang perlu diingat adalah mencari ID CLASS dari struktur penyusun template kamu.
Dalam Blogger, ID CLASS yang umum digunakan adalah
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#header
#footer
Contoh yang biasa saya gunakan.
@media screen and (max-width: 1040px) {
.header-wrapper {
width: 760px;
}
.branding .sidebar {
width: 760px ;
margin: 0 auto;
}
.content-wrapper {
width: 760px;
}
.main-wrapper {
width: 500px;
}
.slides {
width: 760px;
background-image: none;
}
.slides .grid {
width: 233.33333333333333333333333333333px;
margin-left: 10px;
margin-right:10px;
}
}
@media screen and (max-width: 780px) {
.header-wrapper {
width: 500px;
}
.header, .navigation {
width: 100%;
float: none;
clear: both;
text-align: center;
}
.header img {
margin-left: auto;
margin-right: auto;
}
.navigation {
margin-top: 30px;
}
.navigation ul, .navigation ul li {
float: none;
}
.navigation ul li {
text-align: center;
display: inline;
}
.branding .sidebar {
width: 500px ;
}
.content-wrapper {
width: 500px;
}
.sidebar-wrapper {
width: 500px;
margin: 40px 0 0 0;
}
.slides {
width: 500px;
}
.slides .grid {
width: 100%;
margin: 0 0 30px 0;
padding: 0 0 30px 0;
border-bottom: 1px dotted #777;
}
footer.credit .footer {
width: 500px;
margin: 0 auto;
}
}
Jangan lupa tambahkan kode <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> di bawah <head>Sekian artikel kali ini, semoga bermanfaat.
Pertamax gan. Artikel nya sangat membantu.
ReplyDeleteditunggu kunbal nya ya gan
http://www.jasapemasangandomain.com/
Trims gan sangat bermanfaaat,
ReplyDelete