Cara mengubah warna background submenu template viomagz

Halo teman-teman dimanapun kalian berada, kali ini admin akan membagikan tutorial seperti biasanya. Tapi sebelumnya, kalian harus tahu nih bahwa template viomagz milik mas sugeng termasuk template favorit loh sampai 2019 ini, mengapa demikian? Karena template viomagz memiliki tampilan yang friendly dan interaktif menjadikan template ini banyak di gunakan para blogger.

Walaupun begitu kita sebagai manusia biasa pasti memiliki rasa bosan jika tampilannya terkesan itu-itu saja dan mirip user blogger lain yang kebetulan sesama pengguna template viomagz. Lalu kita berusaha merubah dan merombak template tanpa berbekal keahlian coding, alhasil bukanya makin bagus malah template rusak tidak bisa digunakan.

Seperti yang disebutkan dijudul kali ini kita akan membahas tutorial cara mengubah warna background submenu template viomagz. Kebanyakan dari kalian memilih tidak mengubah warna background submenu viomagz karena alasan tidak tahu caranya padahal kalian ingin sekali merubah warnanya agar tampilan viomagz milik anda tidak sama dengan tampilan viomagz milik orang lain.
Cara mengubah warna background submenu template viomagz sebenarnya sangat mudah, anda hanya mencari kode css dari submenu tersebut tetapi keterbatasan pengetahuan tentang coding yang memaksa tidak bisa mebgubahnya. Dengan itu disini admin akan membagikannya secara gratis.

Cara mengubah warna background submenu template viomagz

  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari dan ganti kode antara /* NAV MENU */ sampai /* FOOTER */ dengan kode dibawah ini
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
float: left;
}
#cssmenu ul {
margin: 0;
display: block;
}
#cssmenu:after,#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu > ul > li {
float: left;
margin: 0;
}
#cssmenu > ul > li > a {
padding: 17px;
font: $(navmenu.font);
letter-spacing: 0.8px;
text-decoration: none;
text-transform: uppercase;
color: $(navmenu.font.color);
}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
color: $(navmenu.font.hover.color);
}
#cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
background: rgba(64,64,64,0.1);
-webkit-transition: background .2s ease;
-ms-transition: background .2s ease;
transition: background .2s ease;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: $(navmenu.font.color);
content:''
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: $(navmenu.font.color);
content:'';
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 1;
-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
}
#cssmenu ul ul li {
height: 0;
background :#1e90ff;
margin: 0;
}
#cssmenu ul ul li:hover {
background: #1e90ff;
}
#cssmenu li:hover > ul {
left: auto
}
#cssmenu li:hover > ul > li {
height: 33px
}
#cssmenu ul ul ul{
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
    border-bottom: 1px solid rgba(150,150,150,0.15);
    padding: 10px 25px 10px 15px;
    max-width: 100%;
min-width: 150px;
    font-size: 12px;
    text-decoration: none;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
border-bottom: 0
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content:''
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content:'';
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #1e90ff;
}
#cssmenu ul ul ul li.active a {
border-left:1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{
border-top: 1px solid #333
}
@media screen and (min-width:801px){
#cssmenu ul {
display: block !important;
}
}
@media screen and (max-width:800px){
#cssmenu {
float: none;
}
#cssmenu ul {
background: #1e90ff;
width: 100%;
display: none
}
#cssmenu ul ul {
-webkit-box-shadow: none;
box-shadow: none;
display:none;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #1e90ff;
background: #1e90ff;
}
#cssmenu ul ul li, #cssmenu li:hover > ul > li {
height: auto
}
#cssmenu ul li a, #cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
color: #ffff !important;
}
#cssmenu > ul > li {
float: none
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul, #cssmenu ul ul ul{
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before{
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 24px;
color: #fff;
font-size: 12px;
font-weight: 500
}
.button {
width: 20px;
height: 48px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
z-index: 2;
}
.button:after {
position: absolute;
top: 21px;
right: 0px;
display: block;
height: 4px;
width: 20px;
border-top: 3px solid $(search.icon.color);
border-bottom: 3px solid $(search.icon.color);
content:''
}
.button:before {
position: absolute;
top: 14px;
right: 0px;
display: block;
height: 3px;
width: 20px;
background: $(search.icon.color);
content:''
}
.button.menu-opened:after {
top: 21px;
border: 0;
height: 3px;
width: 20px;
background: $(navmenu.font.color);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.button.menu-opened:before {
top: 21px;
background: $(navmenu.font.color);
width: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #1e90ff;
height: 38px;
width: 38px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: rgba(64,64,64,0.1);
}
#cssmenu ul ul .submenu-button {
height: 32px;
width: 32px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 19px;
right: 16px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content:''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #fff
}
#cssmenu .submenu-button:before {
position: absolute;
top: 16px;
right: 19px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content:''
}
#cssmenu ul ul .submenu-button:before{
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before{
display: none
}
#cssmenu ul ul ul li.active a{
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
border-top: none
}
}
keterangan:

  • kode yang berwarna biru adalah warna background submenu yaitu warna biru
  • sedangkan kode yang berwarna kuning adalah warna font tulisan didalam kode submenu tersebut yang berwarna putih

note:
ubah 2 kode background dan font yang sudah ditandai diatas sesuai keinginan dan kebutuhan anda.

  • selesai, lalu save template.

Mudah bukan? Jangan lupa share dan komen ya

8 komentar dari postingan "Cara mengubah warna background submenu template viomagz"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com