Perhatian :
Sebelum kamu melakukan perubahan, biasakanlah untuk selalu membackup template kamu terlebih dahulu, karena sesal kemudian tidak berguna :D
atribut background digunakan untuk memberikan latar belakang dengan warna ataupun dengan gambar.
Jika latar belakang berupa warna, maka dapat digunakan nama warna yang dapat dikenali oleh browser atau menggunakan
#hex color.
jika latar belakang berupa gambar, maka terlebih dahulu kamu harus meng upload gambar kamu di salah satu hosting site pilihan kamu misal di
http://photobucket.com lalu catat alamat URL dari gambar kamu, misal
http://i123.photobucket/contoh/gambargue.jpg agar dapat digunakan pada saatnya kelak
Ok,
Login dulu ke dashboard-layout kamu --> pilih Edit HTML,
[
ingat, backup dulu template yang sudah kamu miliki]
selanjutnya,
pada box edit template, carilah code berikut :
Code:
Select all
#body {
background:$bgcolor;
Mengubah warna backgroundJika kamu ingin mengubah warna background blog kamu dengan warna yang unik, kamu bisa mengganti
#hex value warna background kamu secara manual,
kamu bisa mampir
kesini untuk mengetahui
#hex color pilihan kamu.
contoh, kamu memilih warna hitam sebagai warna pilihan backgroundmu,
maka
#hex colornya adalah #000000.
selanjutnya, ganti kode diatas menjadi :
Code:
Select all
#body {
background-color: #000000;
Untuk mengubah warna background pada sidebar,
tambahkan #hex value nya disini :
- Code: Select all
#sidebar-wrapper {
background-color: #000000;
Untuk mengubah warna background pada main post column,
tambahkan #hex value nya disini :
Code:
Select all
#main-wrapper {
background-color: #000000;
catatan : untuk template yang berbeda, ada kemungkinan label stylesheetsnya berbeda pula,
#sidebar-wrapper bisa juga ditulis #side-wrap
Menambahkan latar belakang berupa gambartambahkan alamat URL dari gambar kamu disini :
- Code: Select all
- body {
background-image: url(URL address of your image);
- pada sidebar tambahkan alamat URL dari gambar kamu disini :
- Code: Select all
#sidebar-wrapper {
background-image: url(URL address of your image);
pada main post column tambahkan alamat URL dari gambar kamu disini :
- Code: Select all
#main-wrapper {
background-image: url(URL address of your image);
Secara default, gambar background kamu akan ditampilkan secara berulang.
Jika kamu ingin menampilkan berulang secara horizontal, tambahkan kode berikut :
- Code: Select all
#sidebar-wrapper {
background-image: url(URL address of your image);
Jika kamu ingin menampilkan berulang secara vertical, tambahkan kode berikut :
- Code: Select all
background-repeat: repeat-y;
Jika tidak ingin ditampilkan berulang, tambahkan kode berikut :
- Code: Select all
background-repeat: no-repeat;
Kamu juga bisa mengatur gambar kamu dengan posisi tertentu,
Jika kamu ingin mengatur gambar kamu pada posisi kiri atas, tambahkan kode berikut :
- Code: Select all
background-position: top left;
selanjutnya kamu bisa menggantinya dengan :
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
sesuai keinginan kamu
tambahkan juga kode berikut jika kamu menginginkan gambar latar belakang dapat di scroll :
- Code: Select all
background-attachment: scroll;
jika kamu menginginkan gambar latar belakang tidak dapat di scroll,
tambahkan kode berikut :
- Code: Select all
background-attachment: fixed;
ok, selamat mencoba