Seperti Yang Kami Janjikan , Kami Akan Membuat Tutorial "Cara Membuat Template". Sebelum Kalian Melangkah Jauh Untuk Membuat Template. Kalian Wajid Ngerti Tentang CSS, Karena Jika Tidak Ada CSS Kalian Tidak Bisa Membuat Template Dengan Design Yang Rapih Dan Cepat Di Akses.
Jadi Pada Materi Pertama Dalam Membuat Template Kita Mulai Dari Dasar2 CSS.
CSS Di Bagi Menjadi 2 Bagian Yaitu ID Tags dan Class Tags. Apa Bedanya ? Ini Dia Bedanya :
ID Tags CSS
ID Tags CSS Biasanya Menggunakan Tanda "#" Pada Awalan Selector. Biasanya penggunaan class ini pada selector yang sudah di kelompokan. Kalau pada blogspot kita akan menemui banyak tags jenis ini.Contohnya :
#ContohIDTagsCSS{}Untuk Pemanggil Selector Tersebut Menggunakan id="selector" dan Diakhiri Dengan /div. Contohnya :
<div id="ContohIDTagsCSS"></div>Class Tags CSS
Class Tags CSS Biasanya Menggunakan Tanda "." Pada Awalan Selector. Contohnya :
.ContohClassTagsCSS{}Untuk Pemanggil Selector Tersebut Menggunakan class="selector" dan Diakhiri Dengan /div. Contohnya :
<div class="ContohClassTagsCSS"></div>Sekarang Kita Lanjut Ke Command CSS
Command CSS
Command CSS adalah perintah yang bisa digunakan dalam bahasa CSS. Ada berbagai macam perintah dalam bahasa CSS yang bisa anda gunakan. Yang sering digunakan dalam membuat template blogspot adalah seperti dibawah ini:
Vidio :
Pasword : all-tutorial.org
Source Tutorial :
<!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: #FFF;
}
#outer-wrapper {
font: normal 14px/normal "Lucida Console", Monaco, monospace;
text-decoration: none;
height: 630px;
width: 980px;
padding: 0;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#katasambutan {
font-family: "Comic Sans MS", cursive;
color: #FFF;
background: #000;
padding: 5px;
width: auto;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #header {
font: normal 24px/normal "Comic Sans MS", cursive;
background: #333;
color: #FFF;
width: auto;
height: 100px;
border: 1px solid #333;
text-align: center;
padding: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #main-wrapper {
font: normal 16px/normal "Times New Roman", Times, serif;
width: 600px;
padding: 3px;
margin: 5px;
height: 450px;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #main-wrapper #main {
width: 550px;
height: 150px;
background: #CCC;
border: 1px solid #CCC;
text-align: center;
color: #000;
font: normal 24px/normal "Comic Sans MS", cursive;
text-decoration: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
padding: 2px;
}
#footer-wrapper {
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 50px;
width: auto;
padding: 2px;
margin-top: 15px;
text-align: center;
border: 1px solid #000;
color: #FFF;
background: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #sidebar-wrapper {
width: 345px;
float: right;
margin: 5px;
padding: 2px;
border: 5px dashed #FFF;
height: 450px;
background: #CCC;
text-align: center;
font: normal 18px/normal "Comic Sans MS", cursive;
}
</style>
</head>
<body>
<div id="katasambutan">
<marquee>
Selamat Datang / Welcome To My Blog Rully Nur'mansyah Yang Sederhana Ini :D | Jangan Lupa Komen dan Follow Blog Kami Ya :D
</marquee>
</div>
<div id="outer-wrapper">
<div id="header">
<p>Design Template Dengan DreamWeaver</p>
<p>www.all-tutorial.org</p>
</div>
<div id="sidebar-wrapper">Sidebar-Wrpper</div>
<div id="main-wrapper">
<div id="main">main-wrapper:content-wrapper</div>
</div>
</div>
<div id="footer-wrapper">
<p>Design By Rully Nur'mansyah</p>
</div>
</body>
</html>
Supaya Kalian Lebih Jelas Lagi Tentang Penggunaan CSS, Datang Lagi Besok Pada Postingan Tentang "Cara Membuat Template Blogger : Layout CSS Part1", ada Video Tutorialnya Juga Loh. Jangan Lupa Tinggalkan Komentarnya Ya ^_^.
No comments:
Post a Comment