28 May 2011

Cara Mengganti Gambar Background pada Blogspot

Memperindah blog ternyata juga merupakan hal yang menyenangkan, karena kustomisasi blog memang sangat diperlukan agar blog tampak lebih personal dan unik. Nah salah satu yang membuat blog tampak beda dengan yang lain adalah background. Untuk mengganti gambar background blog seperti yang diinginkan, berikut langkah-langkahnya:

(Sebelum anda mengganti gambar background yang ada dan mengganti dengan gambar milik anda, pastikan anda telah menemukan/memiliki gambar background dan menghosting-nya sendiri ->)

1. Masuk ke dashboard anda dan pilih tab menu design/rancangan.
2. Pilih Edit HTML
3. Centang expand widget template di sebelah kanan atas template HTML.
4. Kemudian anda cari kode tag ini: #body-wrapper{ (gunakan Ctrl+F untuk mencari dengan cepat)
    Atau bisa juga dengan mencari kode selengkapnya/menambahkan kode setelah #body-wrapper{ seperti berikut:

   #body-wrapper{background:url(alamat url gambar anda);

5. Ganti alamat url gambar anda dengan alamat gambar background yang telah anda host.
6. Save template

Yang perlu diperhatikan adalah ukuran gambar anda, usahakan untuk tidak menggunakan gambar dengan byte yang besar, usahakan di  bawah 50 Kb, agar tidak membuat loading berat dan lama.
Gambar memiliki ukuran pixel yang berbeda-beda. Pastikan hasil gambar background blog anda penuh dari kiri ke kanan dan dari atas ke bawah. Untuk membuat gambar background penuh diperlukan pengulangan. Gunakan tag repeat (mengulang) ke kanan/samping: repeat-x, dan ke bawah: repeat-y. Berikut contoh untuk pengulangan ke kanan/samping tapi sebelumnya tambahkan kode ini ;background-position:top left;background-repeat: repeat-x repeat-y; ....dst} sesudah alamat URL anda seperti contoh di bawah ini:
          
#body-wrapper{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
)
;background-position:top left;background-repeat: repeat-x repeat-y; ....dst}

Jadinya seperti ini:
           
#body-wrapper{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg);background-position:top left;background-repeat: repeat-x repeat-y; ....dst}



Jika anda tidak ingin gambar anda berulang baik ke kiri atau ke bawah, cukup gunakan kode center top no-repeat;margin:0;padding:0}sesudah alamat URL anda Contoh:
body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
)center top no-repeat;margin:0;padding:0}

Selamat Mencoba....

No comments:

Post a Comment