Backgrond Blog Dengan Gradient Image

Salah satu daya tarik dari penampilan sebuah blog ialah memakai template dengan tata warna yang menarik, sehingga para pengunjung blog akan merasa kagum dengan kecantikan tampilan blog anda.
Solusi untuk menuju kearah itu sangat bermacam-macam 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 menciptakan gradient image, anda sanggup memakai kemudahan layanan dari DynamicDrive. Dari layanan tersebut, anda sanggup menciptakan image gradient yang menarik dalam banyak sekali warna yang anda sukai. Sebagai pola 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 menciptakan 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 menentukan ukuran : Gradient Width:10 dan Gradient Height:800 biar gambar tesebut memenuhi latar blog anda
      
      Agar lebih terang 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), lalu simpan gambar tersebut pada komputer anda. Perhatikan gambar :
      
      
3. Hasilnya menyerupai dibawah ini
   
   


4. Upload gambar tersebut pada hosting penyimpanan gambar menyerupai : Photobucket, Imageshack atau daerah lain yabg biasa anda gunakan.
5. Copy alamat gambarnya lalu simpan pada note pad
   

CARA MEMASUKAN KEDALAM BLOG

1. Masuk ke Blogger
2. Pilih Rancangan bab Edit HTML
3. Cari aba-aba menyerupai 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 aba-aba yang berwarna kuning sehingga menjadi menyerupai 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 aba-aba 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.
   

Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini