Cari Artikel Blog Ini

Total Tayangan Laman

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

    Free online tool- Gradient Image Maker


  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.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
5 Comments

5 komentar :

Aryan mengatakan...

tips yang menarik mas, ditunggu artikel lainnya?

Abdul Azis mengatakan...

Ya, saya sering gagalnya,terutama tentang menulis user name dan password. Kok bisa salah padahal saya ingat betul. Kalau boleh saya minta izin untuk menjadikan blog Anda sebagai link di kornet56.blogspot.com. Blog Anda sangat keren, dan saya ingin belajar banyak.

AbduGreen mengatakan...

Mantab,.... kunjungi balik ya sob... salam kenal... : http://abdu-green.blogspot.com/

yudika mengatakan...

wah keren bangetz..saya diajarin dong..makasih lho atas ilmu2nya

Rizal Yuliandi mengatakan...

wawwww, keren sekali blog nya, tlg penjelasan nya dong sehingga master bisa buat blog se keren ini

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!