Jumat, 13 Juli 2012

Cara Mengganti Background Blog dengan Gambar



Kali ini Saya akan membahas cara untuk mengganti background blog dengan gambar.
Anda bisa ikuti cara di bawah ini ↓

  • Anda upload gambar yang akan digunakan menjadi background blog, bisa upload di situs hosting file image gratis seperti di photobucket.com atau tinypic , jika Anda belum punya akun, Anda daftar terlebih dahulu.

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)

  • 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)

  • Selanjutnya masuk ke blogger.com, jika sudah,
  • Pilih Template → Edit HTML → Expand Widget Template 
  • Setelah itu cari kode berikut :

body {
background: $bgColor;

    • Masukkan kode berikut ini, di bawah kode di atas ↓↑
      background: #642D8B url('url gambar anda' ) fixed repeat top left;

      • Hasilnya seperti di bawah ini ↓
      body {
      background: $bgColor;
      background: #642D8B url('url gambar anda') fixed repeat top left;

      • 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;

      Perhatian :

      url gambar anda diganti dengan url gambar yang telah anda upload, atau diganti dengan url gambar yang saya pakai di bawah ini ↓
      http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif

      • Simpan dan lihat hasilnya

      Selamat Mencoba !

      Tidak ada komentar:

      Posting Komentar