Backgroud 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. Kunjungi Disini
2. Setelah berada pada situs tersebut, silahkan anda membuat gradient image dengan gaya, warna dan ukuran sesuai dengan keinginan.

• Pilih style : Select Gradient Type:
• Pilih Ukuran : Gradient Width: dan Gradient Height:
• Pilih Warna : Top Color : dan Bootom Color :
• Pilih Format gambar : JPEG dan PNG
• 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

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 Memasukkan Ke Blog


Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
    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;
    }

6. Ganti kode yang berwarna merah 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;
}

NB: ganti teks yang bewarna biru dengan URL gambar anda

7. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post