Tahukah anda apa itu gradient atau gradasi? Rasanya saya tak perlu mendefinisikan panjang lebar. Lihat gambar di atas, tanda anak panah ke luar template itulah yang disebut gradient atau gradasi. Warna template gradient ini menggunakan kode css. Dengan warna gradient rasanya template blog lebih hidup dan tidak membosankan. Selain itu kelebihan warna gradient dengan menggunakan css ini lebih ringan di banding menggunakan image.
Pada posting ini saya akan membahas bagaimana cara mengganti background template dengan warna gradient seperti gambar di atas. Jika anda tertarik ikuti langkah berikut:
1 Masuk ke Account blogger anda.
2. Dasbor > Rancangan > Edit HTML.
3. Download Template Lengkap, centang Expand Template Widget untuk berjaga-jaga jika terjadi kekeliruan.
4. Tekan Crtl+F pada keyboard anda, cari kode body {.
5. Di bawahnya cari kode background dan kode warnanya. Tergantung template anda, jika template anda menggunakan kode warna akan di ikuti kode warna pada tulisan background, misal background: #ffa45a;. Namun jika background pada template anda menggunakan dengan url tertentu maka akan tampak seperti ini:
6. Ganti pada tulisan background dan kode yang mengikuti di belakangnya dengan kode di bawah ini:
background: #ffa45a;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#800000', endColorstr='#FFFF00');
background: -webkit-gradient(linear, left top, left bottom, from(#800000), to(#FFFF00));
background: -moz-linear-gradient(top, #800000, #FFFF00);
7. Maka kode keseluruhan akan tampak seperti ini:
body {
font-family:"Trebuchet MS", "Lucida Console", Arial;
background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#800000', endColorstr='#FFFF00');
background: -webkit-gradient(linear, left top, left bottom, from(#800000), to(#FFFF00));
background: -moz-linear-gradient(top, #800000, #FFFF00);
8. Ganti kode warna yang saya beri warna merah dengan warna kesukaan anda.
startColorstr='#800000'= dimulai dari wana yang dimaksud.
endColorstr='#FFFF00'= diakhiri dengan warna yang dimaksud.
9. Jika anda rasa cukup Simpan Template, selesai. Lihat hasilnya.
"Selamat mencoba"
0 komentar:
Posting Komentar