Cara Membuat Template Blogger : Layout CSS Part 1 - TNT4all
News Update
Loading...
Home Design Tutorial Cara Membuat Template Blogger : Layout CSS Part 1

Saturday 29 December 2012

Cara Membuat Template Blogger : Layout CSS Part 1

      ,    6 comments   
Cara Membuat Template Blogger : Layout CSS Part 1 Yo Teman2 Sekarang Saya Memberi Tahu Bagaimana Cara Membuat Template Blogger : Layout CSS Part 1 dengan jelas dan ada Vidionya Kamu Hanya Tinggal Mengikuti Perintahnya Dan Jika Cara Pertama Ini Kamu Sudah Paham Jelas Kamu Bisa Membuat Design Yang Kamu Inginkan Dengan Mudah , Dan Untuk Cara Upload Ke Bloggernya Nanti Di Tutorial Selanjutnya, Langsung Aja Ke Materinya :

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:
cheat sheet
Cheat Sheet



Vidio :


Dan Ini Dia Source Dari Hasil Design Di Atas :
<!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>

Jika ada Yang Tidak Di Mengerti Silahkan Tanyakan Saja

Share with your friends

6 comments

Add your comment

Notification
This is just an example, you can fill it later with your own note.
Done