BACKGROND BLOG DENGAN GRADIENT IMAGE

Salah satu daya tarik dari penampilan sebuah blog adalah menggunakan template dengan tata warna yang menarik, sehingga para pengunjung blog akan merasa kagum dengan kecantikan tampilan blog anda.
Solusi untuk menuju kearah itu sangat beragam tergantung kemampuan dari pemilik blog dalam memahami kode-kode pada template blog masing-masing.
Sesuai dengan judul post, tutorial kali ini akan memandu anda untuk menampilkan bacground blog dengan gradiend image.
Untuk membuat gradient image, anda dapat menggunakan fasilitas layanan dari DynamicDrive. Dari layanan tersebut, anda dapat membuat image gradient yang menarik dalam berbagai warna yang anda sukai. Sebagai contoh coba anda perhatikan image gradient dibawah ini :

 

LANGKAH PERTAMA:

1. Klik tombol dibawah ini untuk mengunjungi Gradient Image Maker dari Dynamicdrive.com
   
   
2. Setelah berada pada situs tersebut, silahkan anda membuat gradient image dengan gaya, warna dan ukuran sesuai dengan keinginan.
   
   1. Pilih style : Select Gradient Type: 
   2. Pilih Ukuran : Gradient Width: dan Gradient Height:
   3. Pilih Warna : Top Color : dan Bootom Color :
   4. Pilih Format gambar : JPEG dan PNG
   5. Untuk background blog sebaiknya anda memilih ukuran : Gradient Width:10 dan Gradient Height:800 agar gambar tesebut memenuhi latar blog anda
      
      Agar lebih jelas perhatikan gambar di bawah ini
      
      
   6. Scroll sedikit kebagian bawah untuk melihat hasil gradient image yang anda buat. Klik tombol Get full size image (terbuka di tab baru), kemudian simpan gambar tersebut pada komputer anda. Perhatikan gambar :
      
      
3. Hasilnya seperti dibawah ini
   
   
4. Upload gambar tersebut pada hosting penyimpanan gambar seperti : Photobucket, Imageshack atau tempat lain yabg biasa anda gunakan.
5. Copy alamat gambarnya kemudian simpan pada note pad

CARA MEMASUKAN KEDALAM BLOG

1. Masuk ke Blogger
2. Pilih Rancangan bagian Edit HTML
3. Cari kode seperti ini :
   
   body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
4. Ganti kode yang berwarna kuning sehingga menjadi seperti dibawah ini
   
   body {
background: url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x fixed;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
5. Kode berwarna kuning merupakan kode untuk menampilkan gradient image. Ganti alamatgambar diatas http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg dengan alamat gambar kepunyaan anda
6. Klik tombol Simpan
7. Lihat background blog anda.