» » » » Merubah Warna Sub Menu Template Evo Magz

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. UnknownMay 25, 2016 at 5:12 PM

    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. Indra DPMay 25, 2016 at 8:48 PM

    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. Dedy Akas WebsiteMay 26, 2016 at 1:12 AM

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

    ReplyDelete
  4. Maman AchmanMay 26, 2016 at 2:51 PM

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

    ReplyDelete
  5. Indra Kusuma SejatiMay 26, 2016 at 5:08 PM

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

    ReplyDelete
  6. Afid ArifinMay 26, 2016 at 9:44 PM

    wah, tutorialnya sangat menarik.

    ReplyDelete
  7. Wahab SaputraMay 27, 2016 at 7:22 AM

    Lagi demen edit-edit template ya Mas...

    ReplyDelete
  8. Chakly RaflesiaDecember 7, 2016 at 1:51 AM

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

    ReplyDelete
  9. CS1_REGISTRASINovember 17, 2017 at 9:59 AM

    Tombol dipojok kanan yg warna merah ini bisa dignti gk warnanta

    ReplyDelete
    Replies
    1. Ahmad ZaelaniNovember 17, 2017 at 3:11 PM

      bisa gan tinggal diatur cssnya

      Delete
    2. CS1_REGISTRASINovember 18, 2017 at 8:03 PM

      Cssnya itu apa ya bisa bagi searchnya tuk saya mempermudah carinya

      Delete
    3. Ahmad ZaelaniNovember 19, 2017 at 5:01 AM

      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
    4. CS1_REGISTRASINovember 21, 2017 at 7:01 PM

      ada wa kamu gk biar saya krim ftonya

      Delete
    5. CS1_REGISTRASINovember 21, 2017 at 7:02 PM

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

      Delete
  10. Surya FitriantoNovember 26, 2017 at 11:30 AM

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

    ReplyDelete
    Replies
    1. Ahmad ZaelaniNovember 26, 2017 at 6:42 PM

      itu fontnya pakai arial gan...

      Delete
    2. Surya FitriantoDecember 2, 2017 at 4:01 PM

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

      Delete
    3. Ahmad ZaelaniDecember 2, 2017 at 4:21 PM

      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
    4. Surya FitriantoDecember 3, 2017 at 4:17 PM

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

      Delete
  11. Doni CJuly 7, 2018 at 12:24 AM

    kalo cara ganti warna scrool to top gimana gan?

    ReplyDelete
  12. Ahmad ZaelaniJuly 7, 2018 at 8:24 AM

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

    ReplyDelete
  13. UnknownNovember 23, 2018 at 10:54 AM

    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. Ahmad ZaelaniNovember 25, 2018 at 4:41 AM

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

      Delete
  14. UnknownNovember 23, 2018 at 10:55 AM

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

    ReplyDelete
    Replies
    1. Ahmad ZaelaniNovember 25, 2018 at 4:43 AM

      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

Subscribe to:Post Comments (Atom)