kode css di template

Jika anda blogger pemula silahkan ikuti saya terus, belajar secara step by step di sini, mengerjakan ini tidak cukup 1 jam, untuk yang propesional blogger mohon pencerahannya bila ada yang salah :D (saya hanya belajar), saya ingin membuat sidebar kiri dan kanan tetapi saya sangat kesulitan, setelah saya amati ternyata ada bagian yang hilang pada kode CSSnya, saya ingin sekali membuat template dari awal hingga saya bisa menyelesaikannya seperti menambahkan warna gambar dll, yu ah lanjutkan perjalan masih panjang

Membuat ukuran

1. outer-wrapper

2. header-wrapper

3. main-wrapper

4. sidebar-wrapper

5. Footer-wrapper

kemudian silahkan pasang kode ini di bawah  ]]></b:skin>

<style type='text/css'> …… </style>

1. outer-wrapper

#outer-wrapper {  background:#ff3366;  width: 1010px;  margin:1 center;  padding:10px;

  text-align:left;  font: $bodyfont;border: 1px solid #00ff00;padding:10px;  }

Taruh di atas </style>

2. header-wrapper

#header{width:920px;overflow:hidden;float:left;border: 1px solid #000000;padding:10px;  }

#header-wrapper{width:900px; margin: 0 auto 10px; border: 1px solid red padding:10px;}

Taruh di atas </style>

3. main-wrapper

#main-wrapper { width: 600px;float: right; word-wrap: break-word; overflow: hidden;border: 1px solid #0000ff; padding:10px; }

Taruh di atas </style>

4. sidebar-wrapper

#sidebar-wrapper{width:500px dotted #22222;float:left;overflow:hidden border: 1px solid #ff00ff;padding:10px; margin:5px,10px,20px,10px;}

 Taruh di atas </style>

5. Footer-wrapper

#footer {width:660px;clear:both;margin:0 auto;padding-top:15px;line-height: 1.6em;

text-transform:uppercase;letter-spacing:.1em;text-align: center;}

Dalam gambar ini posisi tata letaknya :

ukuran yang saya terapkan di atas yang saya warnai tanda merah px , bukan menjadi suatu patokan, silahkan anda ubah sesuai dengan keinginan. part 5 ini pentingnya ketika kita mengetahui suatu ukuran yang pada template anda. jika anda sudah mempunyai blog yang ingin anda ubah silahkan simak pada part ini. karena mencakup dengan warna dll.

jika anda mengunakan template download anda bisa mengatur warna,gambar dan lain-lain. dan merubah bentuk template anda.

pengetahuan anda akan semakin dalam jika anda mengikuti cara dari 1 sampai dengan 5, mengetahui peletakn kode-kode html dan css. 

Biasakan dalam berkunjung untuk komentar, saya masih dalam tahap belajar jika di postingan saya ada yang salah. sobat blog bisa acak template anda sambil belajar


Semoga bermanfaat sobat..... Lanjutkan acak-acak template