Saturday, September 11, 2010

Mengganti Background Dengan Image

Kalian harus mempersiapkan file image. Image ini bisa berbentuk image biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar,
Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar, karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini (ukuran gambar dalam ukuran aslinya)
: alamat gambarnya adalah 
http://img716.imageshack.us/img716/6346/ikonscaff.gif

gambarnya seperti ini :

gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan dalam jumlah yang sangat banyak.

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :


  1. Sign in
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
  5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
  6. body { background:#fff url('http://img716.imageshack.us/img716/6346/ikonscaff.gif); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; }
  7. Klik tombol Pratinjau untuk melihat perubahan
  8. Jika sudah OK, klik tombol Simpan Perubahan Template
  9. Selesai.


Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna background.


Untuk template minima baru :


  1. Sign in
  2. Klik menu Design
  3. Klik menu Edit HTML
  4. Klik tulisan Download Full Template , silahkan save dulu template sobat untuk backup data
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai
  7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
  8. body { background:$bgcolor url('http://img716.imageshack.us/img716/6346/ikonscaff.gif); margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }
  9. Klik tombol Preview untuk melihat perubahan
  10. Bila sudah OK, klik tombol SAVE TEMPLATE
  11. Selesai.
Selamat mencoba,, dan semoga bermanfaat. maju terus blogger INDONESIA!!!
<

Copyright by rizsamarunara

No comments:

Post a Comment