Mengganti Background Dengan Gradient Image

mechanical_warfare_800x600 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 :

 

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 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 :

     

    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:#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. Nerd 

Berlangganan artikel terbaru via Email
Artikel Lainnya :

26 comments

4 Januari 2010 06.29

Nice info. Maksi infonya mas.

4 Januari 2010 07.17

Sip sob. Saya coba dulu. Thanks.

5 Januari 2010 09.10

makin enak ajah nih...hihihi
good good

5 Januari 2010 21.12

nice tips mas,

saran saya sih hosting gambarnya di google sites aja, soalnya kalo di imageshack atau photobucket takut expired

5 Januari 2010 22.17

@ Made gelgel : yap betul mas, pke google site lbh bgs

di sarankan jgn pake imageshack..
sudah banyak korban..
-_-

oh ya..bro farial..
bole ngecek ga bagian tukeran link..
ada acara saling nyundul nih :)
hahaha

27 Februari 2010 22.53

salam kenal,,www.ismuromdhoni.co.cc

3 Maret 2010 14.48

asyik oi infonya...

3 Maret 2010 15.47

baru kali ini ada yg bilang asik oi ! hehe..

19 April 2010 11.06

sangat menghibur postingnya...

19 Mei 2010 08.17

artikel yg menarik, coba dech nanti tak praktekkan...trims

23 Mei 2010 22.25

wah keren. makasih atas infonya...

5 Juni 2010 06.09

Artikel yg berguna banged ne!untung ada disini,makassih infonya...

16 September 2010 07.14

agak ribet sih

tapi dites dulu deh

24 November 2010 16.12

kenapa ya kok background image yang aku ganti gak bisa memenuhi semua layar? apakah kode repeat-nya yang salah? aku pake repeat-y setelah url. Hasilnya gak enak dilihat. Tx ya

24 November 2010 19.02

@Entertaint-Performa : untuk blog kamu coba ganti dengan repeat scroll left top

7 Januari 2011 21.29

layak di coba

Gan Dody Coba Liat blog Gw Gk Jadi Nee Pusing Edit BACKGROUD Nya Klo Ada Vidio Sbnar nya Lbih gmpng Hehehehe (D)


Kunjungi dan jngn lupa folow :
http://pnpceaterinside.blogspot.com

6 September 2011 11.21

thanks buat infonya mas bro:)

3 Oktober 2011 20.51

Makasih postinganya mas, semoga bermanfaat juga buat yang lainya...

12 November 2011 13.29

keren sob,,,, makasih banyak... salam kenal : http://abdu-green.blogspot.com/

16 Januari 2012 15.39

ilmu gw bertambah lagi nih..
tahnks sob..

jangan lpa knjungi blog tolol gw www.yasabiru.blogspot.com

9 Februari 2012 23.31

Mantap sob infonya..
olah TKP dulu

Thanks

1 April 2012 10.12

ok sob perlu dipraktekin nih

30 Juni 2012 16.22

terims ya..atas sharenya

30 Juni 2012 16.26

ini yang aku cari...thnks.

Poskan Komentar

Reader Community

Recent Comments