Saya mulai dari kerangka template berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
<title><data:view.title.escape/></title>
<b:skin><![CDATA[
/* CSS Utama */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header, footer {
background: #fff;
padding: 20px;
margin-bottom: 20px;
}
.main-container {
display: flex;
flex-direction: column;
gap: 20px;
}
main {
flex: 3;
background: #fff;
padding: 20px;
}
aside {
flex: 1;
background: #fff;
padding: 20px;
}
footer {
margin-top: 20px;
}
@media (min-width: 768px) {
.main-container {
flex-direction: row;
}
}
]]></b:skin>
</head>
<body>
<div class='wrapper'>
<header role='banner'>
<b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
</header>
<div class='main-container'>
<main id='main-content' role='main'>
<b:section class='main-section' id='main-section' showaddelement='yes'>
</b:section>
</main>
<aside id='sidebar' role='complementary'>
<b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'/>
</aside>
</div>
<footer role='contentinfo'>
<b:section class='footer-section' id='footer-section' showaddelement='yes'/>
</footer>
</div>
</body>
</html>aa
Begini cara saya membuat template blogger mulai dari nol. Anda tertarik? Silahkan ikuti langkah-langkahnya. Copy-paste saja setiap tahap untuk melihat perubahannya.
Bagaimana pendapat Anda mengenai topik ini? Mari bagikan perspektif Anda di bawah!
Recommended Comments