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:
Semoga tutorial yang saya berikan bermanfaat, Besok kita buat sidebar bawah dan juga menu. Jangan sampai ketinggalan ya.<!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>
11 komentar:
Makasih Mas ilmu yang sangat bermanfaat...
Teruskan gan.. saya akan mengikuti
mantap..!! ane ikutin teruss..!!
Just say " I LIKE IT "
Ikutan nyimak sambil praktek :D
Lanjutkan Masbos \m/
makasi mas
izin comot gan... mantap...!!! maju terus..
sukron yo mas bro atas ilmu ne..................
like..sip mantab..ini yang aku cari..makasih boss
walau gagal tapi sudah membaca
wah, ini baru yang namanya ilmu ga pelit,,hehehe
terimakasih banyak, saya akan giat belajar nih, kalau begini caranya,,hehe
Posting Komentar
Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.