1. Anda harus mengupload gambar yang akan digunakan menjadi background blog, bisa upload di situs hosting file image gratis seperti photobucket. Jika belum punya account disana bisa mendaftar di photobucket.com atau tinypic
Setelah mengupload gambar anda akan mendapakan url gambar tersebut.
(Catatan: gambar yang diupload sebaiknya ukuran filenya kecil, usahakan tidak melebihi dari 10 kbyte) agar saat membuka blog dapat cepat loadingnya
2. Atau jika ingin mencoba gambar background yang saya punya bisa pakai url berikut:
http://nurwida3.xtgem.com/images/petir.gif
( untuk ujicoba)
3. Selanjutnya masuk ke account blogger:
Pilih dasboard -> Rancangan -> Edit Html
4. cari kode berikut:
body {
background: $bgColor;
5. Masukkan kode berikut di bawahnya:
background: #642D8B url('url gambar anda' ) fixed repeat top left;
Hasilnya seperti di bawah ini
body {
background: $bgColor;
background: #642D8B url('http://nurwida3.xtgem.com/images/petir.gif
') fixed repeat top left;
6. Agar background di samping header berubah, maka anda harus mengubah kode berikut:
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
Ubah menjadi:
#header-wrapper {
margin:0;
padding: 0;
background: #642D8B url('http://nurwida3.xtgem.com/images/petir.gif
') fixed repeat top left;
background-color: $headerCornersColor;
text-align: $startSide;
catatan;
url gambar anda diganti dengan url gambar yang telah anda upload, atau diganti dengan url gambar yang saya pakai:
http://nurwida3.xtgem.com/images/petir.gif
6. Simpan template
a. Script untuk mengganti gambar background body
body {
background: $bgColor;
background: #692 url('http://i48.tinypic.com/2ccrmgi.jpg') top center repeat-y;
margin: 0;
padding: 0px;
b. Script untuk mengganti gambar background header
#header-wrapper {
margin:0;
padding: 0;
background: #692 url('http://i48.tinypic.com/2ccrmgi.jpg')
c. Script untuk mengubah lebar content (menjadi 900 pixel)
#content-wrapper {
width: 900px;
d. Script untuk mengubah lebar main (postingan)
#main-wrapper {
margin-$startSide: 14px;
width: 500px;
e. Script untuk mengubah lebar sidebar
#sidebar-wrapper {
margin-$endSide: 10px;
width: 360px;
SAVE SELESAI
