Sabtu, 29 September 2012

Cara Membuat Template Blogger : Dasar Dasar CSS

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>
Agen Bola online Agen Bola online

15 komentar:

  1. Kok gak bisa yah kalo langsung di masukkin ke template saya??

    BalasHapus
  2. @Tokotua Shop FX Kalau Langsung Copy Semua Script Di Atas Emang Gk Bisa ,, Soalnya Script Itu Hanya Baru Dasarnya Atau Sketsanya

    BalasHapus
  3. Rumit banget ya, mas?
    Saya lebih suka pake artisteer aja deh :D

    BalasHapus
  4. saya jadi kepengen membuat template sendiri terutama untuk blog usaha saya, bagus bila memakai template khusus ni
    terima kasih atas tutorialnya, izin bookmark dulu mas

    BalasHapus
  5. Wah tutorialnya bagus banget, Mas. Kelanjutannya mana ya, padahal tinggal ditambahin dikit lagi loh, Mas :D

    BalasHapus
  6. waduh..susah bnr...
    download bahan-bahannya juga butuh wktu sejam..
    tapi thanks udh d ksih tutorialnya walaupun susah..:)
    wajar msih pemula..:)

    BalasHapus
  7. Nice share gan
    tutorial yg bagus

    BalasHapus
  8. info yang bermanfaat bisa di coba gan, buat template blog sendiri...

    BalasHapus
  9. widiiihhh sae pisannnn

    hatur nuhun juragan..

    BalasHapus
  10. WAH keren banget klw bisa pakai template buatan sendiri,,terimakasih sangat membantu..

    BalasHapus
  11. mantab sob tutorialnya. makasih dan salam kenal...

    BalasHapus

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank