Merubah Warna Sub Menu Template Evo Magz

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 MENU2 */, 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
    lihat di ----> LIHAT 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 :


Warna sub menu evo magz yang berhasil dirubah
Warna sub menu evo magz yang berhasil dirubah
Warna sub menu ketika layar di perkecil
Warna sub menu ketika layar di perkecil


8 Responses to "Merubah Warna Sub Menu Template Evo Magz"

  1. Banyak pelajaran yang dapat saya ambil dari artikel kang ahmad ini tentang Template :) kalau template saya mh masih biasa aja sih mas belum di edit :)

    ReplyDelete
  2. Template Evo Magz adalah template yg cukup popupler di kalangan blogger hingga kini, semoga dengan adanya tutorial ini bisa membantu kawan2 yg lain yg masih bingung untuk kostumisasi template ini :D

    ReplyDelete
  3. Template evo magz makin keren ajah nih, apalagi setelah ditambahkan tutor untuk merubah warna sub menu...
    Salam,

    ReplyDelete
  4. selain untuk Template Evo Magz, apakah tutorial ini bisa diterapkan untuk template blogger pada umumnya kang?

    ReplyDelete
  5. semakin nambah lmu saya untuk cara merubah warna sub menu di template Kang, sudah lama ga main yang seperti ini lagi.

    ReplyDelete
  6. wah, tutorialnya sangat menarik.

    ReplyDelete
  7. Lagi demen edit-edit template ya Mas...

    ReplyDelete
  8. Kalau saya sukanya pakai Chrome Dengan hanya menyorot langsung berubah...

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...