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);
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;
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;
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;
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 ketika layar di perkecil |
Ahmad Zaelani
Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple
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 :)
ReplyDeleteTemplate 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
ReplyDeleteTemplate evo magz makin keren ajah nih, apalagi setelah ditambahkan tutor untuk merubah warna sub menu...
ReplyDeleteSalam,
selain untuk Template Evo Magz, apakah tutorial ini bisa diterapkan untuk template blogger pada umumnya kang?
ReplyDeletesemakin nambah lmu saya untuk cara merubah warna sub menu di template Kang, sudah lama ga main yang seperti ini lagi.
ReplyDeletewah, tutorialnya sangat menarik.
ReplyDeleteLagi demen edit-edit template ya Mas...
ReplyDeleteKalau saya sukanya pakai Chrome Dengan hanya menyorot langsung berubah...
ReplyDeleteTombol dipojok kanan yg warna merah ini bisa dignti gk warnanta
ReplyDeletebisa gan tinggal diatur cssnya
DeleteCssnya itu apa ya bisa bagi searchnya tuk saya mempermudah carinya
Deleteyang 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
Deleteada wa kamu gk biar saya krim ftonya
Deletesama itu yg warna merah dihome gantinya gimna ya jga gk nemu2 soalnya
Deletegan, itu yg di SCREENSHOOT menu navigasinya pake font apa ya?
ReplyDeleteitu fontnya pakai arial gan...
Deleteoh ok, gan mau nanya lagi itu yang di sub menu kaya panah yg berwarna merah cara ngerubah warnanya gimana ya?
Deleteoh 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..
DeleteOk gan, thanks jawabannya. Kunjungi Blog Saya juga ya :)
DeleteDNAGAMEZ