Setelah Saya Menjelajahi Google Tentang Cara Membuat Template Saya Dapat 1 Ilmu Yang Gampang Di Mengerti Dan Saya Mendapatkannya Dari http://www.tb4all.blogspot.com/. Cara Ini Sangat Mudah Karena Ada Vidio Tutorialnya Jadi Simak Aja.
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 : tb4all.blogspot.com
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>
0 komentar:
Posting Komentar