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

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 2013-04-28T01:08:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni