Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

7
Tgl. 24 Juli 2012

[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 Gradas...

Background Warna Gradasi Pada 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.


Ad

Suka? Bagikan artikel ini kepada teman - jaringan Anda.
Label: , .
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 7 komentar untuk artikel ELTELU yang berjudul [UPDATE] Cara Membuat Warna Latar Gradasi Untuk Background Halaman Blog .
08/08/12 04.26 O

Mas, sy sudah coba terapkankan, semoga warna background yang saya pake untuk sekarang cocok menurut mas. thx ya om master hehe.

Anonim
08/08/12 21.14 O

@Kraeng FranciscoSiiiiippp... Saya suka dengan tampilannya yang adem Sob. :)

08/08/12 22.01 O

Sama' apalagi saya hehe, boleh tukaran link tidak? saya harus minta ijin dulu ni hehe...trima kasih

Anonim
08/08/12 22.07 O

@Kraeng FranciscoBoleh Sob, silakan pasang link blog ini dan kemudian nanti saya akan pasang balik link blog Sobat. :)

08/08/12 23.30 O

Untuk jawabannya, sudah saya pasang link blog sobat, silahkan di cek. trima kasih.

Anonim
08/08/12 23.46 O

@Kraeng FranciscoTerimakasih Sobat. Link blog Sobat juga sudah saya pasang. Silakan dicek di daftar blog sahabat.

27/06/15 20.39 O

Makasih mas atas bantuan ilmu untuk webnya
salam kenal
@8

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog