[UPDATE] Cara Membuat Warna Latar Gradasi Untuk Background Halaman Blog

Sobat, apabila sebelumnya saya pernah menerbitkan artikel yang berjudul “Cara Mengganti Background Halaman Blog Dengan Warna Latar Gradasi” yang dapat digunakan untuk mengubah warna latar blog ke dalam bentuk warna gradasi, maka artikel ini merupakan update atau pembaruan atas artikel tersebut, karena beberapa waktu yang lalu saya mendapati bahwa ternyata terdapat bug dalam rangkaian kode yang digunakan.

Sebelumnya perhatikan rangkaian kode di bawah ini, di mana kode berikut ini merupakan rangkaian kode yang digunakan untuk membuat warna gradasi pada background dalam artikel sebelumnya.

   1: background: #1f74bf; 

   2: background: -moz-linear-gradient( center top, #1f74bf 60%, #ffffff 100% ); 

   3: background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #1f74bf), color-stop(1, #ffffff) );

   4: background-attachment:fixed;

Dapat kita lihat bahwa dalam rangkaian kode tersebut terdapat 3 (tiga) buah kode background:. Dimana background: yang terdapat pada baris pertama akan berfungsi ketika halaman blog dibuka dengan menggunakan browser perangkat seluler (misalnya Opera Mini), kemudian background: yang terletak pada baris kedua akan berfungsi ketika blog dibuka dengan menggunakan Mozzila Firefox, dan background: yang terletak pada baris ketiga akan berfungsi ketika blog dibuka dengan menggunakan Google Chrome. Sehingga sebenarnya tidak ada yang keliru dalam rangkaian kode tersebut.

Namun ternyata kode tersebut tidak dapat berfungsi secara optimal ketika blog dibuka dalam tampilan versi seluler dengan menggunakan browser komputer (dalam hal ini browser yang dimaksud adalah Google Chrome). Apabila blog dibuka dalam tampilan versi seluler dengan menggunakan Google Chrome, maka warna latar yang dihasilkan tidaklah seperti layaknya ketika dibuka dalam tampilan versi web. Dimana tampilan warna latar untuk tampilan versi seluler ketika halaman blog dibuka dengan menggunakan Google Chrome adalah seperti yang tampak pada gambar di atas.

Nah, itulah bug yang saya maksud, sehingga perlu kiranya bagi saya untuk memberikan update atas kode yang terdapat dalam artikel sebelumnya. Dengan demikian maka warna latar halaman blog untuk tampilan versi web dan versi seluler akan ditampilkan sebagaimana mestinya walaupun dibuka dengan menggunakan browser yang berbeda.

Selanjutnya seperti halnya uraian dalam artikel sebelumnya, apabila kita ingin mengganti background dengan warna gradasi, maka terlebih dulu gambar yang digunakan sebagai latar atau background harus dihapus yaitu 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. Dan kemudian setelah berada di Dasbor Blogger, kerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode background: $(body.background); dan kemudian ganti dengan kode di bawah ini untuk mengubah warna background halaman blog versi web.

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, white) );

background-attachment: fixed;

Ketiga, cari kode body.mobile { dan kemudian sisipkan kode berikut ini tepat di bawahnya untuk menentukan warna background halaman blog versi seluler.

background: #1f74bf;

Keempat, simpan template.

Perlu diketahui bahwa kombinasi warna yang dipakai dalam rangkaian kode tersebut adalah warna biru dan putih, sehingga dalam penerapannya perlu dilakukan perubahan pada kode warna yang dipakai sehingga sesuai dengan desain tampilan halaman blog yang Anda kelola. Dimana sebagai referensi dari penerapan teknik ini, dapat Anda dapat membuka dan mempelajari artikel sebelumnya yang berjudul “Cara Mengganti Background Halaman Blog Dengan Warna Latar Gradasi”.

Semoga berguna dan bermanfaat.

Salam.