Pengaturan background sebuah blog dapat kita lakukan dengan mudah dengan syarat harus mengenal terlebih dahulu bagian-bagian dari blog.
Bagian-bagian tersebut diantaranya :
1. Body : bagian keseluruhan dari blog.
2. Outer Wrapper : bagian yang didalamnya terdapat : Main Wrapper dan Sidebar Wrapper.
3. Main Wrapper : tempat kita membuat postingan.
4. Sidebar Wrapper : tempat kita meletakan berbagai widget
5. Main Widget : bagian dalam dari main wrapper.
6. Sidebar widget : bagian dalam dari sidebar.
Setelah mengetahui bagian-bagian blog tersebut, selanjutnya tinggal mengganti warna sesuai dengan pilihan masing-masing.
Kode warna dapat anda lihat pada KODE WARNA VERSI 1 dan KODE WARNA VERSI 2
1. Pewarnaan pada bagian Body :
body {
background:#002E3F;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
2. Pewarnaan pada bagian Outer Wrapper :
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:#1B703A;
}
Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
3. Pewarnaan pada bagian Main Wrapper :
#main-wrapper {
width: 470px;
float: $startSide;
background:#80FF00;
border:5px solid
backgroudcolor;white;
padding:15px 15px .25em;
word-wrap: break-word;
overflow: hidden;
}
Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
4. Pewarnaan pada bagian Sidebar Wrapper :
#sidebar-wrapper {
width: 230px;
float: $endSide;
background:#78B749;
border:0px solid $bordercolor;white;
padding:5px 5px .25em;
word-wrap: break-word;
overflow: hidden;
margin-bottom:0px;
}
Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
5. Pewarnaan pada bagian Main Widget :
.main .widget{
background:#CAF99B;
border:px solid #cccccc;
margin:0 0 0.5em;
padding:;
}
Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
6. Pewarnaan pada bagian Sidebar Widget :
.sidebar .widget{
background:#CAF99B;
border:2px solid #cccccc;
margin:0 0 0.5em;
padding:0.5em;
}
Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
Selamat Mencoba