Membuat Gradasi Warna Pada Background Blog




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:



- 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.



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:

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 !!!


***








Ada 5 komentar untuk artikel Membuat Gradasi Warna Pada Background Blog

BitInspiration on Senin, 12 Desember 2011 16.34.00 WIB mengatakan...

makasih gan sharingnya........

Tips Trik Komputer Terbaru on Kamis, 05 Januari 2012 21.31.00 WIB mengatakan...

100 % bisa
Bisa di cek om
webawang.blogspot.com
Makasih :D

Toko Blogger on Sabtu, 07 April 2012 20.35.00 WIB mengatakan...

Tararengkyu... :)

Rahul on Jumat, 20 April 2012 11.33.00 WIB mengatakan...

Terimakasih gan.. Langsung says terapkan..

admin on Selasa, 10 Juli 2012 15.26.00 WIB mengatakan...

mantep infonya salam
sukses dari
http://gunung-air.com
(peralatan Rumah tangga)


Posting Komentar

 


garis hitam panjang
garis hitam panjang