Wednesday, April 1, 2009

Mengubah Background



        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

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

Pewarnaan pada bagian Outer Wrapper :

#outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:#1B703A;
}

Perhatikan yang berwarna merah, gantikan dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

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

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

Pewarnaan pada bagian Main Widget :

.main .widget{
background:#CAF99B;
border:px solid #cccccc; 
margin:0 0 0.5em; 
padding:; 
}

Perhatikan yang berwarna merah, sila anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

Pewarnaan pada bagian Sidebar Widget

.sidebar .widget{
background:#CAF99B;
border:2px solid #cccccc; 
margin:0 0 0.5em; 
padding:0.5em; 
}

Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

Selamat Mencuba. Usaha tangga kejayaan

No comments:

Mengubah Background Peringatan Bagi Yang Hidup: Mengubah Background Mengubah Background

Wednesday, April 1, 2009

Mengubah Background



        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

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

Pewarnaan pada bagian Outer Wrapper :

#outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:#1B703A;
}

Perhatikan yang berwarna merah, gantikan dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

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

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

Pewarnaan pada bagian Main Widget :

.main .widget{
background:#CAF99B;
border:px solid #cccccc; 
margin:0 0 0.5em; 
padding:; 
}

Perhatikan yang berwarna merah, sila anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

Pewarnaan pada bagian Sidebar Widget

.sidebar .widget{
background:#CAF99B;
border:2px solid #cccccc; 
margin:0 0 0.5em; 
padding:0.5em; 
}

Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

Selamat Mencuba. Usaha tangga kejayaan

No comments: