Cara Mengubah Warna Header Template VioMagz - Hobi Ngoding

hobingoding.com - Sesuai judul kali ini saya akan membahas bagaimana cara mengubah warna header pada template VioMagz. Sebelumnya header merupakan bagian paling atas dari sebuah blog yang mana header ini biasanya berisi logo dan menu navigasi yang tersedia pada blog tersebut.

Pada template VioMagz itu sendiri warna headernya (lebih tepatnya warna backgroundnya) itu secara default berupa gabungan dua warna yang terdiri dari warna biru tua (sebelah kiri) dan warna biru muda (sebelah kanan) yang berbentuk gradiasi.

Mungkin dari kamu sekalian ada yang kurang menyukai warna yang berbentuk gradiasi ini dimana mungkin kamu lebih suka jika warna header dari template VioMagz ini lebih baik fix satu warna saja. Jika kamu paham paling tidak tentang CSS dan HTML dasar, saya rasa untuk mengubah warna header ini bukanlah hal yang sulit, namun saya tau bahwa tidak semua orang memiliki pemahaman seperti itu. Maka dari itu saya telah membuatkannya tutorialnya sebagai berikut.

Cara Mengubah Warna Gradiasi Header Template VioMagz

1. Masuk ke dashboard Blogger, pilih menu Tema, pilih Edit HTML.

2. Cari kode berikut <Group description="Background" selector=".body-fauxcolumns-outer"> yang sintaksnya kira-kira seperti di bawah ini:

<Group description="Background" selector=".body-fauxcolumns-outer">
 <Variable name="body.background.color" description="Body" type="color" default="#ffffff" value="#ffffff"/>
 <Variable name="posts.background.color" description="Warna Wrapper" type="color" default="#ffffff" value="#ffffff"/>
 <Variable name="header.background.kiri" description="Warna Header Kiri" type="color" default="#5b86e5" value="#5b86e5"/>
 <Variable name="header.background.kanan" description="Warna Header Kanan" type="color" default="#36d1dc" value="#36d1dc"/>
</Group>

3. Gunakan bantuan color picker HTML, lalu ubah bagian yang saya warnai di atas dengan keterangan:

• kode berwarna merah: warna untuk gradiasi header bagian kiri
• kode berwarna biru: warna untuk gradiasi header bagian kanan

4. Simpan Tema.

Namun jika kamu ingin membuatnya menjadi fix satu warna saja tanpa menggunakan gradiasi berikut tutorialnya.

Cara Mengubah Warna Header Template VioMagz Menjadi Fix Satu Warna

1. Masuk ke dashboard Blogger, pilih menu Tema, pilih Edit HTML.

2. Cari kode berikut #header-container yang sintaksnya kira-kira sebagai berikut:

#header-container {
 background: $(header.background.kiri);
 background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 999;
 height: 48px;
}

3. Hapus bagian kode yang saya beri warna merah di atas. Lalu untuk yang saya beri warna biru ganti dengan kode warna dalam bentuk HTML. Untuk mendapatkan kode warna dalam bentuk HTML, kamu bisa searching dengan keyword "HTML Color Picker".

4. Simpan Tema.

Cukup mudah bukan? Sebagai penutup, demikianlah Cara Mengubah Warna Header Template VioMagz, jika ada yang ingin kamu tanyakan silahkan bertanya pada kolom komentar yang ada di bawah. Terima kasih.

Related Posts