Cara Mengubah Warna Menu Header Template VioMagz

Siapa yang tidak mengenal template VioMagz ? Ya, template lanjutan dari EvoMagz karya Mas Sugeng ini sukses menggemparkan dunia per-Blogging-an. Banyak blogger yang menggunakan template VioMagz ini, mulai dari blogger pemula sampai yang sudah lama menekuni dunia blogging.

Cara-mengubah-warna-menu-header-viomagz

Template ini menjadi favorit bagi para blogger, terutama bagi mereka yang baru terjun ke dunia blog dan belum mengerti ilmu “coding”. Hal itu karena memang template VioMagz ini mudah untuk dipahami struktur-struktur kode yang ada didalamnya.
Banyak teman – teman blogger yang mencoba untuk mengubah warna bawaan dari template ini. Salah satunya adalah warna gradasi pada menu header, seperti gambar dibawah ini.
Lalu, bagaimana cara untuk mengubah warnanya ? berikut ini akan admin kasih tau bagaimana cara untuk mengubah background warna gradasi menu header pada template VioMagz.

Cara Merubah Gradasi Warna Header VioMagz

1. Buka akun Blogger – pilih TemaEdit HTML

2. Lalu cari kode dibawah ini

#header-container {

Cara-mengubah-warna-menu-header-viomagz

3. Lihat dibawah kode tersebut, maka akan ada kode ini

background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));

ubah kode $(header.background.kiri) dan $(header.background.kanan) dengan kode warna yang kita inginkan, Misal :

background: linear-gradient(to right, black, blue);

Cara-mengubah-warna-menu-header-viomagz

4. Selain itu, kita juga bisa merubah direction warna gradasinya dengan cara mengganti tulisan to right nya, misal kita ganti menjadi to left, maka hasilnya kurang lebih akan seperti ini

background: linear-gradient(to left, black, blue);

Cara-mengubah-warna-menu-header-viomagz

Contoh to right (dari hitam kekanan menjadi biru)

Cara-mengubah-warna-menu-header-viomagz

Contoh to left (dari hitam kekiri menjadi biru)

Cara-mengubah-warna-menu-header-viomagz

5. Dan jika kita ingin menggunakan lebih dari 2 warna (misal 3 warna, 4 warna, dan seterusnya) cukup dengan tambahkan kode warna setelah warna kedua, misal seperti ini.

background: linear-gradient(to left, black, blue, warna3, warna4);


Contoh to left, black, blue, red, green

Cara-mengubah-warna-menu-header-viomagz

6. Perlu diketahui bahwa untuk penggunaan warna, bisa menggunakan HTML Colour ataupun HTML Hexadecimal

  • HTML Colour seperti Red, Green, Blue, dst...
  • HTML Hexadecimal seperti #ffffff, #eaeaea, #f8f8f8, dst...
7. Nah, untuk mempermudah memakai kode HTML Hexadecimal, bisa didapat disini :

Dan langkah terakhir adalah simpan template
Itulah cara mengganti gradasi warna menu header pada template VioMagz. Tentunya sangat mudah bagi yang belum paham dunia coding. Selamat mencoba

Artikel Terkait

Buka Komentar
Tutup Komentar

Belum ada Komentar untuk "Cara Mengubah Warna Menu Header Template VioMagz"

Posting Komentar

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel