Minggu, 28 April 2013

Membuat Warna Efek Sebagai Background Blog

Membuat Warna Efek Sebagai Background Blog - Salah satu faktor yang membuat tampilan blog menjadi bagus dan sedap dipandang adalah penggunaan background pada blog. Dan background blog yang mudah digunakan adalah berupa gambar karena dengan menggunakan background gambar, kita juga dengan mudah menyesuikan dengan keinginan kita atau menyesuaikan dengan tampilan serta topik yang ada di dalam blog tersebut.

Namun menggunakan gambar sebagai background blog secara berlebihan juga tidak baik untuk proses loading blog karena semkin banyak gambar yang dipasang sebagai background maka semakin lambat loading blog, belum lagi gambar-gambar yang terpasang di dalam artikel blog. Jadi, selain mempercantik tampilan blog, background gambar juga memperburuk proses loading blog.

Lalu bagaimana caranya agar blog memiliki tampilan yang bagus tanpa menggunakan background gambar? Solusinya yaitu dengan menggunakan warna sebagai background. Dalam penggunaan warna sebagai background blog tentu kita harus kreatif agar tampilan blog benar-benar cantik dan bagus, dan melalui artikel Membuat Warna Efek Sebagai Background Blog ini, saya akan sedikit menjelaskan penggunaan warna sebagai background blog dengan contoh tampilan seperti pada gambar berikut ini

Membuat Warna Efek Sebagai Background Blog

Pada contoh gambar diatas, merupakan perpaduan dua warna yaitu biru dan merah sehingga jika dipadukan akan memiliki efek warna seperti diatas. Bagaimana cara membuatnya?
Untuk membuat warna efek sebagai background blog, anda cukup menambahkan kode-kode berikut ini kedalam kode template blog atau lebih tepatnya pada kode-kode CSS dari setiap ID element yang diinginkan

Efek Warna Biru Merah

Untuk membuat waran efek biru merah diatas, gunakan kode background seperti berikut ini :
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);

Efek Warna Biru Merah

Untuk membuat waran efek biru merah diatas, gunakan kode seperti berikut ini :
background-image:-webkit-linear-gradient(right,#2008FD,#FD0808);
background-image:-moz-linear-gradient(right,#2008FD,#FD0808);
background-image:-ms-linear-gradient(right,#2008FD,#FD0808);
background-image:-o-linear-gradient(right,#2008FD,#FD0808);
background-image:linear-gradient(right,#2008FD,#FD0808);

Untuk penerapan didalam template, silahkan ganti kode-kode warna yang anda inginkan.

Contoh pemasangan warna efek sebagai background header, menu, body, sidebar, footer blog
#header {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#menu {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#body {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#sidebar {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#footer {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}

Jadi intinya, anda cukup menambahkan kode warna background diatas untuk setiap element-elemen blog yang anda inginkan.
Okey, cukup sekian dulu artikel tentang membuat warna efek sebagai background blog, sengaja saja menggunakan bahasa yang mudah dimengerti untuk artikel ini, Membuat Warna Efek Sebagai Background Blog

Membuat Warna Efek Sebagai Background Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

13 komentar:

  1. gan link anda udah sudah saya pasang di blog saya...
    saya ingin bertukar link.

    mas.basir.blogspot.com

    BalasHapus
    Balasan
    1. saya sudah lihat blognya mas Basir, menggunakan template dari mas Sugeng juga ya,,
      sebelumnya saya mohon maaf mas Basir, untuk tukar link belum bisa saya setujui, maaf ya mas..

      Hapus
  2. www.tollywoodpolitics.com
    www.bollywoodindiaboxoffice.com

    BalasHapus
  3. wahh keren juga gan!!!.........perlu dicoba

    BalasHapus
  4. www.dennisdavida.blogspot.com

    BalasHapus
  5. ini yang saya cari, terima kasih gan

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia