Cara Mengganti Background Halaman Blog Dengan Warna Latar Gradasi

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.

Semoga berguna serta bermanfaat, dan selamat bereksperimen.

Salam.