Apabila pada artikel sebelumnya yang berjudul “Cara Membuat Bingkai Atau Tombol Dengan Warna Gradasi (Gradient Colour) Pada Blog”,
telah saya uraikan teknik yang digunakan untuk membuat bingkai atau
tombol dengan menggabungkan atau mengkombinasikan beberapa warna sebagai
warna latar atau background, maka artikel ini merupakan kelanjutan atau
penerapan atas pembahasan yang telah diuraikan dalam artikel tersebut.
Dan bahwasanya pada artikel tersebut telah saya uraikan pula bahwa
dengan menggunakan teknik ini akan dapat mempercepat proses penayangan
atau loading halaman sebuah blog (terutama untuk akses internet yang
menggunakan sambungan atau koneksi dengan bandwidth rendah), karena
browser tidak perlu melakukan request ke beberapa server yang berbeda
untuk menayangkan atau menampilkan gambar yang dipakai pada setiap
elemen yang ada.
Kemudian untuk mempermudah pembahasan dan pemahaman, maka dalam artikel
ini saya hanya akan menggunakan 1 (satu) buah model background dengan
warna gradasi (gradient colour), seperti yang tampak di bawah ini.
Selanjutnya apabila Anda ingin menerapkanya pada halaman blog yang Anda
kelola, maka kombinasi warna yang digunakan untuk membuat gradasi warna
tersebut dapat Anda kreasikan sesuai dengan desain atau model tampilan
halaman blog yang dimaksud.
Oke, sekarang kita bahas satu per satu penerapan atas penggunaaan teknik
tersebut untuk beberapa elemen utama yang terdapat dalam halaman sebuah
blog, dalam hal ini adalah header, tab menu, dan footer. Namun perlu
diingat bahwa untuk menerapkan teknik ini, terlebih dahulu Anda harus
masuk ke editor template Blogger, dalam hal ini adalah dengan mengeklik
menu 'Template’ >> ‘Edit HTML’ >> ‘Lanjutkan’ >>
‘Expand Template Widget’.
Header
Untuk membuat warna gradasi pada background header dengan model gradasi seperti contoh di atas, maka cari kode background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.
border: 1px solid #3d85c6; background: #073763; background: -moz-linear-gradient( center top, white 50%, #3d85c6 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );
Tab Menu
Seperti teknik di atas, untuk mengubah tab menu dengan warna gradasi, maka cari kode background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.
border: 1px solid #3d85c6; background: #073763; background: -moz-linear-gradient( center top, white 30%, #3d85c6 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );
Selanjutnya untuk memberikan efek hover atau efek yang tampil ketika
mouse pointer diletakkan di atas salah satu menu yang ada, maka cari
kode background-color: $(tabs.selected.background.color); dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.
background: #0b5394; background: -moz-linear-gradient( center top, white 60%, #3d85c6 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );
Footer
Sedangkan untuk membuat warna gradasi pada footer, maka cari kode background: $(footer.background); dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.
border: 1px solid #3d85c6; background: #073763; background: -moz-linear-gradient( center top, white 50%, #3d85c6 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );
Kemudian perlu saya tegaskan sekali lagi bahwa contoh yang digunakan
dalam pembahasan ini adalah menggunakan model background dengan warna
gradasi yang sama, sehingga apabila diterapkan pada blog yang Anda
kelola, maka tentunya Anda harus menyesuaikan kombinasi warna yang
digunakan sesuai dengan desain atau model tampilan halaman blog yang
Anda kelola. Dalam hal ini adalah dengan cara mengganti beberapa kode
warna yang digunakan seperti #073763; #3d85c6, #0b5394, dan juga white
dengan kode dan atau warna lain yang sesuai. Perlu diingat pula
bahwasanya teknik tersebut hanya dapat diterapkan pada template bawaan
Blogger dan tidak berlaku untuk custom template, karena bisa jadi
template yang dimaksud memiliki desain atau struktur kode yang berbeda.
Selanjutnya untuk mepermudah Anda yang belum memahami bahasa
pemrograman, silakan buka artikel yang berjudul "Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background" untuk melihat beberapa contoh kombinasi warna beserta kode CSS maupun kode HML-nya.
Semoga berguna dan bermanfaat.
0 komentar:
Posting Komentar