Apabila sebelumnya Anda sudah pernah membuka halaman blog ini, pastilah sekarang Anda akan melihat bahwa Semar Bingung’s Weblog
telah memiliki tampilan halaman yang sangat jauh berbeda dengan desain
tampilan halaman yang digunakan sebelumnya. Ini disebabkan karena
beberapa waktu yang lalu saya telah melakukan perubahan desain dan tata
letak widget serta tampilan untuk halaman blog ini.
Perubahan yang saya lakukan diantaranya adalah menghapus halaman ‘Tukar
Tautan’, kemudian memindah banner serta tautan yang ada di dalamnya ke
beberapa widget yang saya tempatkan di area footer, dan juga beberapa
perubahan untuk widget yang ditampilkan pada sidebar halaman.
Disamping itu perubahan juga saya lakukan pada beberapa elemen halaman
yang lain, dalam hal ini adalah pemberian bingkai dan penggunaan
background dengan warna gradasi untuk masing-masing elemen tersebut.
Tujuan dari pembenahan yang saya lakukan, tidak lain adalah untuk
memberikan kemudahan dan kenyamanan kepada setiap pengunjung yang
membuka halaman ini, sehingga akhirnya mereka merasa lebih betah berada di sini
untuk membuka dan membaca setiap artikel yang ada. Selain itu
pembenahan yang saya lakukan tersebut juga saya maksudkan agar tautan
atau banner sahabat yang semula terdapat di halaman ‘Tukar Tautan’ dapat
dengan mudah dilihat oleh pengunjung dengan cara memindahnya ke halaman
‘Beranda’, karena pada kenyataannya menurut analisa data statistik
kunjungan yang ada, halaman ‘Tukar Tautan’ sangat jarang dibuka oleh
pengunjung. Dengan demikian maka apabila tautan atau banner sahabat
diletakkan di halaman depan atau beranda, maka akan memberikan peluang
lebih besar untuk dibuka oleh pengunjung karena tautan atau banner
tersebut dapat langsung dilihat ketika membuka halaman ‘Beranda’.
Oke, sekarang kita kembali pada pokok bahasan yang sebelumnya, yaitu
tentang perubahan atau pembenahan yang saya lakukan untuk tampilan
halaman blog ini. Seperti yang
telah saya sebutkan di atas, bahwasanya perubahan saya lakukan untuk
berbagai elemen yang ada. Dimana salah satunya adalah penggunaan warna
gradasi sebagai background untuk masih-masing elemen tersebut. Nah,
terkait dengan penggunaan warna gradasi sebagai background, maka dalam
artikel ini saya akan menguraikan cara yang digunakan untuk mengubah
atau mengganti background halaman blog dengan warna gradasi, karena
ulasan untuk penggunaan warna gradasi pada elemen halaman yang lainnya
telah saya terbitkan di blog saya yang lain (dalam hal ini saya
terbitkan di ‘ILMUDI BLOG’ dalam kategori artikel ‘Pemrograman’), yang diantaranya adalah artikel dengan judul 1) Cara Membuat Bingkai Atau Tombol Dengan Warna Gradasi (Gradient Colour) Pada Blog, 2) Cara Membuat Background Dengan Kombinasi Warna Pada Elemen Halaman Blog, 3) Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background, dan 4) Cara Membuat Tombol Read More Dengan Bingkai Efek Warna Background Gradient.
Jadi begini, apabila kita akan mengganti background halaman dengan warna
gradasi, maka terlebih dahulu yang perlu kita perhatikan adalah apakah
saat ini halaman blog yang kita kelola menggunakan gambar sebagai
background atau tidak. Jika saat ini halaman blog yang kita kelola
menggunakan gambar sebagai background, maka terlebih dahulu gambar yang
digunakan sebagai latar atau background tersebut harus dihapus atau
dihilangkan dengan cara: buka menu ‘Template’ > klik ‘Ubahsesuaikan’ untuk membuka ‘Perancang Template Blogger’ > klik menu ‘Latar Belakang’ > dan kemudian klik ‘Hapus Gambar’ > ‘OK’ > dan kemudian klik tombol ‘Terapkan ke Blog’ yang terletak di bagian pojok kanan atas halaman. Nah, selanjutnya apabila gambar latar sudah dihapus, klik ‘Kembali ke Blogger’ untuk mengerjakan langkah yang berikutnya.
Setelah kembali ke Blogger, langkah berikutnya klik ‘Edit HTML’ > klik ‘Lanjutkan’ > cari kode background: $(body.background);
dan kemudian ganti kode tersebut dengan kode CSS untuk membuat warna
gradasi. Dimana sebagai contoh kode CSS untuk membuat warna gradasi,
misalnya adalah seperti kode di bawah ini.
background: #1f74bf; background: -moz-linear-gradient( center top, #1f74bf 60%, #ffffff 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #1f74bf), color-stop(1, #ffffff) ); background-attachment:fixed;
Perhatikan bahwa kode tersebut merupakan kode CSS untuk warna gradasi yang digunakan untuk background halaman ini, sehingga apabila diterapkan maka akan menghasilkan warna background seperti yang tampak pada blog ini.
Kombinasi warna yang digunakan dalam rangkaian kode tersebut adalah
warna biru dan putih, sehingga apabila ingin menerapkannya pada halaman
blog yang Anda kelola, bisa jadi kombinasi warna yang digunakan perlu
disesuaikan terlebih dulu dengan desain tampilan halaman blog Anda.
Dalam hal ini penyesuaian dapat dilakukan dengan cara mengganti kode #1f74bf dan #ffffff
dengan kode warna yang sesuai. Dan sebagai contoh kombinasi warna
gradasi, dapat Anda lihat dengan membuka artikel yang saya posting di ILMUDI BLOG (ilmudi.blogspot.com), dalam hal ini pada artikel yang saya posting dalam kategori ‘Pemrograman’ dengan judul ‘Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background’.
Sedangkan untuk persentase gradasi, dapat Anda sesuaikan dengan mengubah angka 60% dengan persentase gradasi yang Anda inginkan. Dan satu hal yang perlu diingat adalah, jangan mengganti atau menghapus kode background-attachment:fixed;
karena kode tersebut dipakai untuk menjadikan background berada pada
posisi yang tetap terhadap halaman browser yang digunakan. Sehingga
dengan demikian dapat diartikan bahwa background tidak akan mengikuti
pergerakan halaman posting ketika halaman posting digulung ke atas
maupun ke bawah.
