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


25 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
  9. Tombol dipojok kanan yg warna merah ini bisa dignti gk warnanta

    ReplyDelete
    Replies
    1. Cssnya itu apa ya bisa bagi searchnya tuk saya mempermudah carinya

      Delete
    2. yang mana sih yang mau digantinya.., css itu cascading style sheet,, jadi buat gaya halamannya,, itu berupa kode,, tapi kalu evo magz, bisa diedit dari halaman "sesuaikan", coba explore dulu

      Delete
    3. ada wa kamu gk biar saya krim ftonya

      Delete
    4. sama itu yg warna merah dihome gantinya gimna ya jga gk nemu2 soalnya

      Delete
  10. gan, itu yg di SCREENSHOOT menu navigasinya pake font apa ya?

    ReplyDelete
    Replies
    1. oh ok, gan mau nanya lagi itu yang di sub menu kaya panah yg berwarna merah cara ngerubah warnanya gimana ya?

      Delete
    2. oh itu untuk sub menunya,,, saya lupa lagi classnya apa, soalnya saya sudah tak pake sub menu,, bisa cek di inspek elemen , lalu nanti tinggal nambahin / rubah kode warnanya,,, harus paham css dulu sih gan..

      Delete
    3. Ok gan, thanks jawabannya. Kunjungi Blog Saya juga ya :)
      DNAGAMEZ

      Delete
  11. kalo cara ganti warna scrool to top gimana gan?

    ReplyDelete
  12. cari clas back-to-top, lalu atur warnanya sesuai yang kamu inginkan

    ReplyDelete
  13. sangat bermanfaat, boleh bertanya gan, kalau pada bagian related post, supaya link nya bisa berbaris vertikal kaya punya agan gimana yah caranya

    ReplyDelete
    Replies
    1. itu matched konten gan, dari google adsense, coba cari tahu di google tentang matcehd konten dan bagaimana cara membuatnya

      Delete
  14. Sekalian cara edit please share itu menu fb, twet dan lainya supaya bisa berbaris gmna yah editnya, terimakasih gan

    ReplyDelete
    Replies
    1. Bisa gunakan fitur pencarian di blog ini, pakai kata kunci berikut : Membuat Tombol Share Sosial Media di Blog atau Membuat Tombol Share Pop-up di Blogspot

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin