halo semua kali ini kita akan belajar membuat template blogger sederhana mulai dari awal sampai dengan selesai dengan menggunakan CSS Flex sebagai kerangka / layout dasarnya, dengan CSS FlexBox kita bisa lebih mempercepat pengolahan CSS dan HTML untuk responsive layout dan juga lebih simple tentunya.
Banyak metode yang bisa digunakan untuk membuat layout sebuah website/blog, bisa juga menggunakan jenis Grid yang juga banyak dipakai oleh para pengembang website sekarang2 ini, mungkin dikesempatan lainnya kita coba membuat layout dengan metode lainnya. semoga bermanfaat.
Basic Blogger Tempplate by Mawarni Studio
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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 content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>
<b:skin version='1.3.3'><![CDATA[
*{ box-sizing: border-box; }
.header {
background: #ccc;
padding: 2rem;
}
.row {
display: flex;
}
.column {
padding: 2rem;
min-height: 200px;
}
.column.left {
flex:1;
background: #aaa;
}
.column.main {
flex:3;
background: #fff;
}
.footer {
padding:2rem;
background: #ccc;
}
@media (max-width:600px) {
.row {
flex-direction: column;
}
}
]]></b:skin>
</head>
<body>
<div class='header'>
<b:section id='header-section' name='Header'>
<b:widget id='Header1' locked='false' title='basic template (Header)' type='Header' visible='true'></b:widget>
</b:section>
</div>
<div class='row'>
<div class='column left'>
<b:section id='sidebar'>
<b:widget id='Label1' locked='false' title='Label' type='Label' visible='true'></b:widget>
</b:section>
</div>
<div class='column main'>
<b:section class='main' id='main-section'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' visible='true'></b:widget>
</b:section>
</div>
</div>
<div class='footer'>
<b:section class='footer' id='footer-section'></b:section>
</div>
</body>
</html>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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 content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>
<b:skin version='1.3.3'><![CDATA[
*{ box-sizing: border-box; }
.header {
background: #ccc;
padding: 2rem;
}
.row {
display: flex;
}
.column {
padding: 2rem;
min-height: 200px;
}
.column.left {
flex:1;
background: #aaa;
}
.column.main {
flex:3;
background: #fff;
}
.footer {
padding:2rem;
background: #ccc;
}
@media (max-width:600px) {
.row {
flex-direction: column;
}
}
]]></b:skin>
</head>
<body>
<div class='header'>
<b:section id='header-section' name='Header'>
<b:widget id='Header1' locked='false' title='basic template (Header)' type='Header' visible='true'></b:widget>
</b:section>
</div>
<div class='row'>
<div class='column left'>
<b:section id='sidebar'>
<b:widget id='Label1' locked='false' title='Label' type='Label' visible='true'></b:widget>
</b:section>
</div>
<div class='column main'>
<b:section class='main' id='main-section'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' visible='true'></b:widget>
</b:section>
</div>
</div>
<div class='footer'>
<b:section class='footer' id='footer-section'></b:section>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar