Mengganti Background Dengan Gradient Image

Salah 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 dari http://tools.dynamicdrive.com/gradient. Dengan tools tersebut, kita bisa membuat gambar gradasi, contoh gambar gradasi bisa sobat lihat dibawah ini :

 

 

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

   

  

   

  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 menggunakan photobucket, 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 :

   

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

   

  

 

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:#000000 url(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 ?

#000000 url(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 dengan warna hitam (#000000).

 

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

Oleh : Dody FariaL Pada hari Minggu, Januari 03, 2010

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :