Modifikasi Background pada Blogger template

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 background

Jika 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 gambar


tambahkan 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