Cara Membuat Template Blogspot: Layout CSS Part1 - Sorry nih hari ini agak maleman postingnya, pada tutorial kali ini saya akan membahas tentang "Cara Membuat Template Blogspot: Layout CSS Part1". Jika anda ingin membuat template blogspot pasti yang anda butuhkan pertama kali adalah layout css.
Nah saya udah buat video tutorialnya untuk anda. Isi dari video tutorial ini adalah untuk membuat outerwrapper, header, sidebar, menu dan posting.
Video tutorialnya adalah sebagai berikut:
Lanjutannya
Untuk sourcenya anda bisa mengambilnya di bawah ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin: 0px;
}
#outer-wrapper {
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #666666;
height: 1000px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
#outer-wrapper #header {
height: 100px;
width: auto;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
#outer-wrapper #header #logo {
float: left;
height: 80px;
width: 300px;
border: 1px solid #666666;
margin: 10px;
}
#outer-wrapper #header #banner {
float: right;
height: 80px;
width: 500px;
border: 1px solid #666666;
margin: 10px;
}
#outer-wrapper #menu {
height: 35px;
width: auto;
background-color: #CCCCCC;
}
#outer-wrapper #content-wrapper {
height: 600px;
width: 850px;
margin-right: auto;
margin-left: auto;
border: 1px solid #999999;
margin-top: 10px;
}
#outer-wrapper #content-wrapper #posting {
float: left;
height: 600px;
width: 600px;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999999;
}
#outer-wrapper #content-wrapper #sidebar {
float: right;
height: 600px;
width: 240px;
}
-->
</style>
</head>
<body>
<div id="outer-wrapper">
<div id="header">
<div id="logo">Content for id "logo" Goes Here</div>
<div id="banner">Content for id "banner" Goes Here</div>
</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="content-wrapper">
<div id="posting">Content for id "posting" Goes Here</div>
<div id="sidebar">Content for id "sidebar" Goes Here</div>
</div>
</div>
</body>
</html>
