CARA MENGUBAH BACKGROUND BLOG
15.44
Nuze 22
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.
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, silahkan anda 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, silahkan anda ganti 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, silahkan anda 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, silahkan anda 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, silahkan 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.
Silahkan anda coba dengan mengganti kode warna pada bagian-bagian blog yang anda kelola.
Selamat mencoba, semoga bermanfaat...!!
Posted in: Tutorial
0 komentar:
Posting Komentar