Cara Mudah Mengganti Background Blog Dengan Gambar

Cara Mudah Mengganti Background Blog Dengan Gambar- Baiklah kawan Toko Desain..kali ini saya akan memberikan tips baru cara mengubah gambar background blog dengan gambar sendiri. Buat teman-teman yang masih pemula, mungkin ada yang belum tahu cara mengganti background blog. Sebenarnya anda bisa mengubah background blog dengan menambah sedikit script CSS ke template blog.

Sebagai Catatan:

Saya menguji coba template ini pada template olahan blogger yaitu: “GamesWP” (seperti yang saya pakai ini)
Mungkin jika menggunakan template lain tidak berfungsi optimal, karena setiap template mempunyai struktur dan syntax script yang berbeda.

Jika tertarik mengganti background blog dengan gambar sendiri , bisa ikuti prosedur berikut:

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, saya sarankan anda upload gambar ke tinypic)

2. Atau jika ingin mencoba gambar background yang saya punya bisa pakai url berikut:

http://i1099.photobucket.com/albums/g390/Aryo24/tokodesain4.png
http://i1099.photobucket.com/albums/g390/Aryo24/Original.png
http://i1099.photobucket.com/albums/g390/Aryo24/tookodesain.png

(pilih salah satu untuk uji coba)

3. Selanjutnya masuk ke account blogger:

Pilih dasboard -> Rancangan -> Edit Html

4. Kita cari kode berikut:

body {

 

Contoh: Disini saya mengambil contoh pada background body di template blog Toko Desain, Nah di sana terdapat kode background,

body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

Setiap blog terkadang ada yang berbeda Background-nya, untuk mengganti background semisal dengan background / gambar ini :

http://i1099.photobucket.com/albums/g390/Aryo24/tokodesain4.png

Maka kawan-kawan cukup menambahkan url (http://i1099.photobucket.com/albums/g390/Aryo24/tokodesain4.png) repeat-x;  pada background tersebut.
Jadi :

body{
background:#ded8c0 url(http://i1099.photobucket.com/albums/g390/Aryo24/tokodesain4.png) repeat-x;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}


Gambar Background kawan-kawan juga bisa tetap, walaupun scroll mouse kawan-kawan bergerak ke atas atau ke bawah. Tinggal kawan-kawan ganti repeat-x; menjadi repeat-x top left fixed;

Atau yang paling saya suka adalah menggunakan gambar kecil namun bisa menjadi besar dan tetap. Yakni kawan-kawan cari dulu gambar kecil, setelah itu seperti biasa, tinggal kawan-kawan ubah repeat-x; menjadi repeat scroll 0 0;

5. Yang terakhir, langsung SAVE saja....dan lihat hasilnya.
 

OK,,, Mungkin ini menu desain yang Toko Desain tampilkan hari ini. Selamat Mencoba teman. Dengan mencoba kita, kita bisa mengerti. Semoga bermanfaat. Have a nice blogging:)