Rabu, 02 Maret 2011

Mengganti Background Dengan Gradient Image

mechanical_warfare_800x600Salah satu cara agar pengunjung betah berlama-lama di blog kita adalah dengan menggunakan template yang menarik. Selain kecepatan loading blog juga tentunya sangat berpengaruh pada pengunjung blog, template yang menarik tentu akan sedikit menambah bumbu dalam blog kita.

Untuk membuat template yang menarik, salah satunya dengan konsep pewarnaan judul postingan, background postingan atau judul sidebar dengan background template yang pas.

Untuk membuat background blog, kita bisa menggunakan fasilitas darihttp://tools.dynamicdrive.com/gradient. Dengan tools tersebut, kita bisa membuat gambar gradasi, contoh gambar gradasi bisa sobat lihat dibawah ini :

gradasi 2 gradasi 1

Baiklah, daripada pusing kita langsung praktek aja ya !
  • Langsung saja tuju web layanan gradient image maker, masuk ke gradient dari dynamicdrive.
  • Pada halaman depan sobat, pilih model gradasi yang akan sobat gunakan

    pilih model
  • Pilih saja model yang pertama, kemudian isi gradient width dengan 10, dan gradient height dengan 800 ( angka ini tidak mutlak harus 10 dan 800, sesuaikan dengan keinginan sobat saja ).

    color

    Pilih warna untuk top color dan bottom color, ingat warna yang bottom color karena akan kita letakkan di template kita nantinya.
  • Jika sudah, sekarang klik Get full size image, dan sobat simpan gambar yang sudah jadi di komputer.
  • Upload gambar tersebut ke hosting yang akan sobat gunakan, bisa menggunakanphotobucket, google sites atau jika ingin yang lebih mudahnya sobat bisa membuat blog baru dengan blogspot, khusus untuk menyimpan gambar, seperti yang selama ini saya lakukan.
  • Sebagai contoh gambar yang sudah jadi bisa sobat lihat dibawah ini :

    gradasi 3 
  • Coba klik Kanan pada gambar diatas, lalu pilih properties. Perhatikan Image Properties, pada location ada url yang kemudian akan kita gunakan pada background blog nantinya.

    image

Langkah selanjutnya adalah proses mengganti background template-nya :
  • Login ke blogger dengan ID sobat
  • Klik tab Edit HTML
  • Cari kode seperti berikut (biasanya terletak di bagian atas) :
  • body { width:980px; background:#FFFFFF; font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
  • Kemudian ganti sehingga menjadi seperti berikut :
  • body { width:980px; background:#000000url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x;font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
  • Kemudian Simpan Template.

Eleman apa yang harus di tambahkan ?
#000000url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x;

Kode yang berwarna merah sobat ganti dengan url tempat sobat mengupload gambar gradasi-nya.

Mengapa saya mengganti warna putih (#FFFFFF) dengan warna hitam (#000000)? karena pada saat membuat gambar gradasi, saya menggunakan bottom color denganwarna hitam (#000000).

Baiklah, itu saja kira-kira tutorial blog kali ini, semoga berhasil mengganti background template dengan gambar gradasi-nya. Nerd


Artikel Terkait:


Diposting oleh Ichsan Saputra di 14.41
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Komentator Blog Ini