Cara Merubah Background Blog

        
Pengaturan background sebuah blog dapat kita lakukan dengan mudah dengan syarat harus mengenal terlebih dahulu bagian-bagian dari blog.
Bagian-bagian tersebut diantaranya :

♀ Body : bagian keseluruhan dari blog.
♀ Outer Wrapper : bagian yang didalamnya terdapat : Main Wrapper dan Sidebar Wrapper.
♀ Main Wrapper : tempat kita membuat postingan.
♀ Sidebar Wrapper : tempat kita meletakan berbagai widget
♀ Main Widget : bagian dalam dari main wrapper.
♀ Sidebar widget : bagian dalam dari sidebar.

Setelah mengetahui bagian-bagian blog tersebut, selanjutnya tinggal mengganti warna sesuai dengan pilihan masing-masing.

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 merah, 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 kuning, 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 kuning, 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 kuning, 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 kuning, 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 kuning, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post