Cara Mengganti Background Blog Dengan Gambar Sendiri

Baiklah sobat..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 bawaan blogger yaitu: "Denim"
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://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif
http://i37.tinypic.com/apb69k.jpg
http://i36.tinypic.com/n1bdcz.jpg
(pilih salahsatu untuk ujicoba)

3. Selanjutnya masuk ke account blogger:
Pilih dasboard -> Rancangan -> Edit Html


4. cari kode berikut:

body {

font: $(body.font);
color: $(body.text.color);
background: $(body.background);


5. Masukkan kode berikut di bawahnya:

background: #642D8B url('url gambar anda' ) fixed repeat top left;

Hasilnya seperti di bawah ini


body {

font: $(body.font);
color: $(body.text.color);
background: $(body.background);


background: #642D8B url('url gambar anda') 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('url gambar anda') 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 lihat no 2


Tambahan :
Jika anda menggunakan template denim + sun of moto (masih template bawaan /standar blogger) dan ingin mencoba mengganti background  dengan foto anda sendiri,  bisa lakukan modifikasi script pada template anda seperti dibawah ini:

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;


yuupp,,, Mungkin itu tips yang bisa saya berikan hari ini. Selamat Mencoba teman. Dengan mencoba kita, kita bisa mengerti. Semoga bermanfaat. Have a nice bloggin.:)



21 comments:

  1. gan thanks banget infonya, akhirnya ketemu tutorial yang tepat. :) nice posst ^^

    ReplyDelete
  2. wah nambah berat loading blog nanti,

    ReplyDelete
  3. bener gan, setuju ama yg di atas,,, nambah berat loading gak ya...

    ReplyDelete
  4. Ada satu kasus, misalkan blog tersebut memiliki 2 buah gambar yang berbeda, di sisi atas ada gambar A yang ukurannya tidak berubah ke bawah kecuali ke sisi kanan / kiri, lalu disambung dengan gambar B yang juga dapat tampil dan akan berulang sampai ke bawah. Kalau kasus seperti ini bagaimana ya. Terima kasih.

    ReplyDelete
  5. Blog ku ini, www.citramandiriproperti.com

    Nah di sisi atas ada format gambar, katakanlah namanya gambar A. Lalu ada warna latar belakang, aku ingin mengganti warna latar belakang itu dengan gambar lain, katakanlah gambar B. Gambar B ini akan terisi sampai ke bawah. Bagaimana caranya ya, ada yang bisa membantu ?
    Terima kasih.

    ReplyDelete
  6. cara membuat akun google adsense dengan mudah, silahkan kunjungi disin :

    http://rizalblogmaster.blogspot.com/2013/03/cara-mendaftarmendapatkan-akun-google.html

    ReplyDelete
  7. thanks sob atas tipsnya , your blog is so nice ...

    next to your created , dont forget to follow back and support her

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. thanks you gan :)

    numpang nitip link yak..
    http://rere-putra.blogspot.com/

    nuhun :D

    ReplyDelete
  10. yang ini ga ketemu di html blog saya
    body {

    ReplyDelete
  11. mampir ke sini juga http://www.kotakmusic.com/

    ReplyDelete
  12. punya kami sudah berhasil gans, terimaksih atas saranya,,,

    www.ilmusosiologi.com

    ReplyDelete