Membuat Gradasi Warna Pada Background Blog

CSS untuk Membuat Gradasi Warna Pada Background Blog

Tampilan suatu situs atau blog akan berpengaruh pada kenyamanan pengunjung untuk berlama-lama mengunjungi suatu situs/blog. Untuk itulah saya tekankan agar kalian bisa mendesain tampilan sebagus dan semenarik mungkin tanpa harus membuat loading blog/situs menjadi lambat.

Gradien pada latar belakang atau background blog berfungsi untuk mempercantik tampilan blog. Dulu saya sudah pernah membuat panduan cara mengganti background blog yaitu dengan Memasang Background Gambar pada Blog serta yang kedua dengan sistem otomatis yaitu Membuat Pilihan Warna Background Sesuai Keinginan Pengunjung

Kedua cara diatas bisa kalian terapkan, namun untuk memperkaya kemampuan kita dalam mendesain situs atau blog maka tidak ada salahnya jika kita pelajari juga cara mendesain background blog dengan merubah CSS blog tersebut.

Berikut ini saya berikan panduan praktis merubah latar belakang atau background blog dengan gradasi warna yang diperoleh dengan menambahkan CSS tertentu pada blog.

Kalau kamu ingin mencoba bagaimana tampilan CSS background gradasi warna yang saya pakai di blog saya silahkan kamu ikuti panduan berikut:

1. Merubah background Blog dengan Gradasi Warna

- Login ke dasbor blogger --- Klik Template --- Klik EDIT HTML.

- Cari kode body { background: dan seterusnya

- Kalau sudah ketemu, lalu paste script CSS berikut:

background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(3,3,8,1) 7%, rgba(14,15,46,0) 39%, rgba(15,16,48,0) 41%, rgba(31,33,99,1) 85%, rgba(36,39,117,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(7%,rgba(3,3,8,1)), color-stop(39%,rgba(14,15,46,0)), color-stop(41%,rgba(15,16,48,0)), color-stop(85%,rgba(31,33,99,1)), color-stop(100%,rgba(36,39,117,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(3,3,8,1) 7%,rgba(14,15,46,0) 39%,rgba(15,16,48,0) 41%,rgba(31,33,99,1) 85%,rgba(36,39,117,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(3,3,8,1) 7%,rgba(14,15,46,0) 39%,rgba(15,16,48,0) 41%,rgba(31,33,99,1) 85%,rgba(36,39,117,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(3,3,8,1) 7%,rgba(14,15,46,0) 39%,rgba(15,16,48,0) 41%,rgba(31,33,99,1) 85%,rgba(36,39,117,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(3,3,8,1) 7%,rgba(14,15,46,0) 39%,rgba(15,16,48,0) 41%,rgba(31,33,99,1) 85%,rgba(36,39,117,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#242775',GradientType=0 ); /* IE6-9 */

Paste script CSS tersebut dibawah kode body { background: dan seterusnya.

Perhatikan gambar berikut untuk panduannya:

CSS background blog

Kalau sudah, klik Preview terlebih dahulu, jika sudah benar dan tidak eror barulah kamu klik Save Template.

2. Design sendiri CSS untuk Mengganti Background Warna Blog dengan Gradasi Warna

Cara yang diatas tadi itu cara yang pertama, berikut ini saya berikan cara lain lagi yang lebih rumit yaitu dengan mengambil CSS dari situs gradient editor. Meski sedikit lebih ribet namun dengan cara ini kamu bebas berekspresi merubah warna dan model gradasi yang kamu inginkan. 

Berikut caranya:

a. Buka situs http://www.colorzilla.com/gradient-editor

b. Lalu, kamu pilih atur warna background yang kamu inginkan.

Pilih model warna dan orientasinya

Atur juga intensitas gradasi warnanya

c. Setelah kamu merasa yakin dan mantap dengan desain dan warna yang kamu inginkan, lalu lihat disebelah kanan bawah, disana sudah muncul kode CSS untuk background situs/blog kamu.

Copy CSS

d. Copy kode CSS nya.
e. Lalu, buka blog kamu, masuk ke Template --- EDIT HTML.

f. Cari kode body { background: dan seterusnya.
g. Kalau sudah ketemu, lalu paste script CSS yang sudah kamu dapatkan tadi dibawah kode  body { background:

Paste-kan kode CSS

h. Lanjutkan dengan klik Preview terlebih dahulu.

i. Jika sudah benar dan tidak eror barulah kamu klik Save Template.

Selamat Mencoba !!!

***

Baca juga : Disabilitas dan Pandangan Masyarakat dan Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia TEAK 123 best teak garden furniture manufacturer wholesale in IndonesiaBisnis Online Daftar Gratis Bonus jutaan rupiah sertaVIAR Motor Indonesia

Demikian artikel: Membuat Gradasi Warna Pada Background Blog semoga bermanfaat bagi anda.