Cara membuat template agar responsif
Kali ini saya mau berbagi pengalaman tentang membuat sebuah template menjadi responsif
Membuat template menjadi responsif itu sangat mudah sekali asal anda tahu id dari pemakaian kode html tersebut karna untuk pemakain template menjadi responsif biasanya dari id tersebut ,seperti contoh di bawah berikut:
<html>
<head>
<b:skin>
<![CDATA[
#wrapper {width:800px;
margin: 0 auto;
padding: 0}
#header-wrapper{width:800px;}
#content-wrapper{width:500px;
float:left;
}
#sidebar-wrapper{width:300px;
float:right;
}
]]>
</b:skin>
</head>
<body>
<div id='wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
</b:section>
</div>
<div id='content-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>
</div>
</body>
</html>
<head>
<b:skin>
<![CDATA[
#wrapper {width:800px;
margin: 0 auto;
padding: 0}
#header-wrapper{width:800px;}
#content-wrapper{width:500px;
float:left;
}
#sidebar-wrapper{width:300px;
float:right;
}
]]>
</b:skin>
</head>
<body>
<div id='wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
</b:section>
</div>
<div id='content-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>
</div>
</body>
</html>
Di atas adalah contoh html dengan id dari beberapa bagian dari kelasnya masing-masing
Kita melihat di atas dengan bundel id kelas pembungkus yang di awali dengan div oh iya lihat dulu bagian skin di atas itu adalah tata letak sebelum responsif dimana wrapper dengan lebar 800px content posisi kiri kemudian sidebar posisi kanan dan header tidak berposisi artinya otomatis
Lihat di bawah bagian skin tersebut :
Lihat di bawah bagian skin tersebut :
#wrapper {width:800px;
margin: 0 auto;
padding: 0}
#header-wrapper{width:800px;}
#content-wrapper{width:500px;
float:left;
}
#sidebar-wrapper{width:300px;
float:right;
}
margin: 0 auto;
padding: 0}
#header-wrapper{width:800px;}
#content-wrapper{width:500px;
float:left;
}
#sidebar-wrapper{width:300px;
float:right;
}
Untuk membuat responsif tentunya sangat mudah sekali
Anda tinggal membuat style untuk bagian responsif biasanya di awali dengan tanda
@media screen and (max-width:940px) {
Nah selanjutnya kita buat responsif halaman tersebut dengan menuliskan bagian bagian responsif ini contohnya di bawah :
@media screen and (max-width:940px) {
#wrapper{width:100%}
#header{width:100%;}
#content-wrapper{float:left;
width:100%;
}
#sidebar-wrapper{float:left;
width:100%;
}
}
#wrapper{width:100%}
#header{width:100%;}
#content-wrapper{float:left;
width:100%;
}
#sidebar-wrapper{float:left;
width:100%;
}
}
Ilustrasi foto responsif
https://brolik.com/blog/responsive-web-design-examples-with-css-tips-and-tricks/
Dengan bagian css sederhana di atas juga sudah responsif asalkan kode css tersebut di simpan di bagian atau sesudah kode/tanda :
@media screen and (max-width:940px) {
Terima kasih telah membaca artikel tentang Cara membuat template menjadi responsif di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.