Vio Magz - Modif Sub Navigasi Di Tengah

Vio Magz ngomongin masalah templete atau tema blog ini banyak yang sudah paham dengan templetenya om sugeng, karena emang mudah SEO , dan struktur tema yang mudah diopersaikan maka tidak heran bila templetenya banyak yang memakainya, sebut saja yang sudah sukses duluan yakni evomagz.

Nah masalah vio magz ini juga tak kalah oke dengan versi sebelumnya, apalagi buat kamu yang emang sudah beli templetenya mas sugeng secara resmi atau tidak download yang versi free.

Banyak cara orang mengekspresikan kesuakaannya dengan sebuah templete blog maka tak heran bila templetenya banyak yang bagus dan enak dipandang salah satunya juga tampilan web saya hehe, coba cek aja tampilannya DISINI !

Oke tak perlulah panjang lebar langsung ke topik utama saja yakni mengedit tampilan pada menu Sub Navigasi pada templete viomagz, yang dengan sentuhan sedikit saja templete kita terlihat amat keren cuy! lihat saja contohnya dibawah ini.

Nah kalau anda memang tertarik untuk memodifikasinya , berati kamu menemukan artikel yang tepat dan akurat , oke langsung saja kita belajar mempraktekannya.

CARA MODIF TEMPLETE VIOMagz DI SUB NAVIGASI.

Buka dashbor Blogger kalian
Kemudian cari dan klik TEMA / Templete
Tunggu loaading dulu di browses anda sebentar kok kalau internetmu kenceng.
Selanjutnya setelah muncul tampilan edit Templete, kamu klik saja HTML.

Cari dan temukan kode dibawah ini dalam menu CSS.

/* NAV MENU */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#cssmenu ul li a {
 position: relative;
}
#cssmenu #head-mobile {
 position: relative;
}
#cssmenu {
 text-align: left;
}
#cssmenu ul {
 margin: 0;
 display: block;
 height: 48px;
}
#cssmenu #head-mobile {
 display: none;
 position: relative;
}
#cssmenu > ul > li {
 float: left;
 margin: 0;
}
#cssmenu > ul > li > a {
 padding: 0 17px;
 font: $(navmenu.font);
    line-height: 48px;
 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 {
 position: relative;
}
#cssmenu > ul > li.has-sub > a:after, #cssmenu ul ul li.has-sub > a:after {
    content: "\f0d7"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-left: 10px;
}
#cssmenu ul ul li.has-sub > a:after {
    content: "\f0da"; 
}
#cssmenu > ul > li.has-sub:hover > a:after {
    content: "\f0d8"; 
}
#cssmenu ul ul {
    height: auto;
 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);
    opacity: 0;
    transform: translateY(-2em);
    transition: all 0.3s ease-in-out 0s;
}
#cssmenu li:hover > ul {
 left: auto;
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s; 
}
#cssmenu ul ul li {
 background: $(navsubmenu.font.background);
 margin: 0;
}
#cssmenu ul ul li:hover {
 background: $(navsubmenu.hover);
}
#cssmenu ul ul ul{
 margin-left: 100%;
 top: 0
}
#cssmenu ul ul li a {
    font: $(navsubmenu.font);
    border-bottom: 1px solid rgba(150,150,150,0.15);
    padding: 0 17px;
    line-height: 42px;
    max-width: 100%;
    text-decoration: none;
    color: $(navsubmenu.font.color);
    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:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover {
 background: $(navsubmenu.hover);
}

@media screen and (min-width:801px){
 #cssmenu ul {
  display: block !important;
 }
}
@media screen and (max-width:800px){
 #cssmenu {
  float: none;
 }
 #cssmenu ul {
  background: $(navsubmenu.font.background);
  width: 100%;
  display: none;
  height: auto;
  -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 {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
 }
 #cssmenu ul ul {
  -webkit-box-shadow: none;
  box-shadow: none;
  display:none;
        opacity: 1;
        transform: translateY(0%);
        transition: unset;
 }
    #cssmenu li:hover > ul {
        transition-delay: 0s, 0s, 0s; 
    }
 #cssmenu ul li {
  width: 100%;
  border-top: 1px solid rgba(150,150,150,0.15);
  background: $(navsubmenu.font.background);
 }
    #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
        background: $(navsubmenu.hover);
    }
    #cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
        color: $(navsubmenu.font.color);
    }
    #cssmenu ul ul li a {
        padding: 0 25px;
    }
 #cssmenu ul li a, #cssmenu ul ul li a {
  width: 100%;
  border-bottom: 0;
  color: $(navsubmenu.font.color);
 }
 #cssmenu > ul > li {
  float: none;
  position: relative;
 }
 #cssmenu ul ul li.has-sub 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 ul > li.has-sub > a:after {
  display: none
 }
 #cssmenu #head-mobile {
  display: block;
  padding: 24px;
  color: #fff;
  font-size: 12px;
  font-weight: 500
 }
 .button {
  width: 25px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 14px;
  cursor: pointer;
  z-index: 2;
  outline: none;
 }
 .mline1, .mline2, .mline3 {
  position: absolute;
  left: 0;
  display: block;
  height: 3px;
  width: 22px;
  background: $(search.icon.color);
  content:'';
  border-radius: 5px;
  transition: all 0.2s;
 }
 .mline1 {
  top: 0;
 }
 .mline2 {
  top: 7px;
 }
 .mline3 {
  top: 14px;
 }
 .button.menu-opened .mline1 {
  top: 8px;
  border: 0;
  height: 3px;
  width: 22px;
  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 .mline2 {
  top: 8px;
  background: $(navmenu.font.color);
  width: 22px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg)
 }
 .button.menu-opened .mline3 {
        display: none;
        height:0;
    }
 #cssmenu .submenu-button {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  cursor: pointer;
 }
 #cssmenu .submenu-button:after {
        content: "\f0d7"; 
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        margin: 0 20px;
        color: $(navsubmenu.font.color);
        line-height: 42px;
 }
 #cssmenu .submenu-opened:after {
        content: "\f0d8"; 
    }
 #cssmenu ul ul .submenu-button:after {
  line-height: 36px;
 }
 #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
 }
}

Setelah menemukan kode CSS diatas tinggal kalian hapus dan kalian ganti dengan kode CSS dibawah ini.

/* NAV MENU */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#cssmenu ul li a {
 position: relative;
}
#cssmenu #head-mobile {
 position: relative;
}
#cssmenu {
 text-align: left;
}
#cssmenu ul {
 margin: 0;
 display: block;
 height: 48px;
}
#cssmenu #head-mobile {
 display: none;
 position: relative;
}
#cssmenu > ul > li {
 float: center;
 margin: 0;
}
#cssmenu > ul > li > a {
 padding: 0 17px;
 font: $(navmenu.font);
    line-height: 48px;
 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 {
 position: relative;
}
#cssmenu > ul > li.has-sub > a:after, #cssmenu ul ul li.has-sub > a:after {
    content: "\f0d7"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-left: 10px;
}
#cssmenu ul ul li.has-sub > a:after {
    content: "\f0da"; 
}
#cssmenu > ul > li.has-sub:hover > a:after {
    content: "\f0d8"; 
}
#cssmenu ul ul {
    height: auto;
 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);
    opacity: 0;
    transform: translateY(-2em);
    transition: all 0.3s ease-in-out 0s;
}
#cssmenu li:hover > ul {
 left: auto;
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s; 
}
#cssmenu ul ul li {
 background: $(navsubmenu.font.background);
 margin: 0;
}
#cssmenu ul ul li:hover {
 background: $(navsubmenu.hover);
}
#cssmenu ul ul ul{
 margin-left: 100%;
 top: 0
}
#cssmenu ul ul li a {
    font: $(navsubmenu.font);
    border-bottom: 1px solid rgba(150,150,150,0.15);
    padding: 0 17px;
    line-height: 42px;
    max-width: 100%;
    text-decoration: none;
    color: $(navsubmenu.font.color);
    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:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover {
 background: $(navsubmenu.hover);
}

@media screen and (min-width:801px){
 #cssmenu ul {
  display: block !important;
 }
}
@media screen and (max-width:800px){
 #cssmenu {
  float: none;
 }
 #cssmenu ul {
  background: $(navsubmenu.font.background);
  width: 100%;
  display: none;
  height: auto;
  -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 {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
 }
 #cssmenu ul ul {
  -webkit-box-shadow: none;
  box-shadow: none;
  display:none;
        opacity: 1;
        transform: translateY(0%);
        transition: unset;
 }
    #cssmenu li:hover > ul {
        transition-delay: 0s, 0s, 0s; 
    }
 #cssmenu ul li {
  width: 100%;
  border-top: 1px solid rgba(150,150,150,0.15);
  background: $(navsubmenu.font.background);
 }
    #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
        background: $(navsubmenu.hover);
    }
    #cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
        color: $(navsubmenu.font.color);
    }
    #cssmenu ul ul li a {
        padding: 0 25px;
    }
 #cssmenu ul li a, #cssmenu ul ul li a {
  width: 100%;
  border-bottom: 0;
  color: $(navsubmenu.font.color);
 }
 #cssmenu > ul > li {
  float: none;
  position: relative;
 }
 #cssmenu ul ul li.has-sub 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 ul > li.has-sub > a:after {
  display: none
 }
 #cssmenu #head-mobile {
  display: block;
  padding: 24px;
  color: #fff;
  font-size: 12px;
  font-weight: 500
 }
 .button {
  width: 25px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 14px;
  cursor: pointer;
  z-index: 2;
  outline: none;
 }
 .mline1, .mline2, .mline3 {
  position: absolute;
  left: 0;
  display: block;
  height: 3px;
  width: 22px;
  background: $(search.icon.color);
  content:'';
  border-radius: 5px;
  transition: all 0.2s;
 }
 .mline1 {
  top: 0;
 }
 .mline2 {
  top: 7px;
 }
 .mline3 {
  top: 14px;
 }
 .button.menu-opened .mline1 {
  top: 8px;
  border: 0;
  height: 3px;
  width: 22px;
  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 .mline2 {
  top: 8px;
  background: $(navmenu.font.color);
  width: 22px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg)
 }
 .button.menu-opened .mline3 {
        display: none;
        height:0;
    }
 #cssmenu .submenu-button {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  cursor: pointer;
 }
 #cssmenu .submenu-button:after {
        content: "\f0d7"; 
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        margin: 0 20px;
        color: $(navsubmenu.font.color);
        line-height: 42px;
 }
 #cssmenu .submenu-opened:after {
        content: "\f0d8"; 
    }
 #cssmenu ul ul .submenu-button:after {
  line-height: 36px;
 }
 #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
 }
}

Untuk tampilan kecilnya dan simpelnya kalian bisa cari kode utama saja yakni pada menu CSS di bawah ini kalian cukup ganti saja.

#cssmenu > ul > li {
 float: left;
 margin: 0;

Setelah kalian menemukan kode CSS diatas kalian tinggal hapus dan ganti dengan kode dibawah ini.

#cssmenu > ul > li {
 float: center;
 margin: 0;
}

Nah kemudian klik simpan dan lihatlah hasilnya pasti amaizing , tampilan blogmu pasti tambah keren dan tambah nyaman dilihat serasa pingin pencet terus tombol navigasinya hehe.

Selamat mencoba dan selamat mengedit templete vio magz kawan semoga artikel ini bermanfaat , jangan lupa kritik dan sarannya ditunggu hehe.

Vio Magz - Modif Sub Navigasi Di Tengah

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel