TRIK Merubah Warna Sub Menu Template Evomagz

Merubah Warna Sub Menu Template Evo Magz

Welcome back Sobat S3VTRIK ! Kali ini saya akan berbagi pengalaman saya mengutak atik template merakyat satu ini yaitu template evomagz. Template ini sangatlah mudah dipakai bagi blogger pemula seperti saya dan mudah untuk di modifikasi agar tidak sama dengan blogger lain yang menggunakan template ini. Kali ini saya akan berbagi Cara merubah Sub Menu Pada Template Evomagz

Secara default warna sub menu dari template Evo Magz adalah Putih dengan text hitam dengan warna hover sedikit ke abu - abuan, warna sub menu tersebut tidak bisa kita rubah dari halaman penyesuian blogger, jadi kita perlu melakukan editing css untuk warna sub menunya. Sebelumnya juga Saya pernah Iseng - Iseng Modifikasi Template Evo Magz dan telah melakukan banyak perubahan terutama untuk bagian menunya

Berikut ini adalah langkah - langkan Merubah Warna Sub Menu Template Evo Magz :

1. Masuk ke blogger, klik Template > Edit HTML

2. Cari kode /* NAVIGATION MENU 2 */,

untuk lebih cepat gunakan menu search dengn menekan tombol ctrl+f

kode tersebut sebenarnya

hanyalah sebuah tanda yang menyatakan bahwa dibawah kode tersebut

ada susunan CSS untuk warna navigasi

3. Selanjutnya scrol ke bawah dan cari susunan css seperti berikut

    .nav-menu2 li ul {
     background:#0072c6;
     display:block;
     position:absolute;
    left:0;
    z-index:10;
    visibility:hidden;
    opacity:0;
    -webkit-transition:all .25s ease-out;
    -moz-transition:all .25s ease-out;
    -ms-transition:all .25s ease-out;
    -o-transition:all .25s ease-out;
    transition:all .25s ease-out;
    box-shadow:0 0 4px rgba(0,0,0,0.3);

4. Kode background:#0072c6; merupakan kode warna background yang saya

pakai, Anda bisa menggunakan kode warna lain. Kode warna bisa Anda

cari di menu search di atas dengan kata kunci " kode warna"

5. Bila Anda ingin merubah text dari sub menu tersebut, Anda bisa scroll lagi

kebawah dan cari susunan css seperti berikut

.nav-menu2 li li a {

     display: block;
     color:#fff;
     position: relative;
     z-index:100;
     line-height:32px;

6. color:#fff; merupakan kode warna text yang bisa Anda rubah sendiri

7. Selanjutnya bila Anda ingin merubah warna hover dari sub menunya, Anda

bisa sedikit scroll lagi kebawah dan cari susunan css seperti berikut :

.nav-menu2 li li a:hover {
background:#2f96e3;

8. Kode background:#2f96e3; merupakan kode warna yang saya pakai, Anda bisa

merubahnya sesuai keinginan dengan cara mengganti nilainya

menggunakan kode warna yang lain

Ini sebenarnya masih belum selesai karena ketika layar diperkecil ternyata sub menu dan hovernya tidak mengikuti variabel css sebelumnya, karena warna css ketika layar diperkecil sudah ditentukan sendiri oleh si pembuat template, maka dari itu kita masih harus merubahnya caranya adalah sebagai berikut :

1. Cari susunan kode css seperti berikut

@media only screen and (max-width:768px){

2. Kemudian scroll sedikit kebawah dan cari susunan css seperti berikut

     .nav-menu2 li ul {
        background:#000;
        border:none;
        box-shadow:none;

3. Kode background:#000; merupakan kode warna yang saya gunakan

silahkan rubah sesuai selera

4. Selanjutnya bila kita juga ingin merubah warna hovernya maka cari

susunan kode CSS seperti dibawah ini

.nav-menu2 li li a:hover {
background:#2f96e3;

5. Silahkan rubah background:#2f96e3; nilai variable/warnanya sesuai

keinginan

Saya sudah menerapkan cara diatas ke blog ini, dan hasilnya kurang lebih seperti berikut :