Cara Membuat Menu Navigasi Samping Di VioMagz

Cara Membuat Menu Navigasi Samping Di Viomagz
Cara Membuat Menu Navigasi Samping Di VioMagz

Prohrd.org – Cara Membuat Menu Navigasi Samping Di VioMagz, Hallo sahabat prohrd bagaimana dengan perkembangan blogger kalian semoga ada kabar baik yah, nah pada kesempatan kali ini saya akan membagikan satu tutorial yang bisa mempercantik tampilan menu samping di tema viomagz kalian.

Tutorial kali ini saya khususkan bagi pengguna blogger dan yang memakai template viomagz saja ya temen – temen, nah kalo pada template lain saya belum coba, jika kalian mau coba saya persilahkan, tapi semua resiko teman teman yang nanggung ya, hehhe.

Tetapi jangan khawatir, untuk kalian yang memakai template yang struktur kodenya mirip dengan template VioMagz, kalian bisa mencoba tutorial Cara Membuat Menu Navigasi Samping Di VioMagz ini. 

Baca Juga: Penjelasan Cryptocurrency Sebagai Transaksi

jika ada sedikit kesalahan pada kodenya untuk yang menggunakan template selain VioMagz, mungkin kalian sudah kembangkan kodenya sendiri. 

Untuk kalian yang tidak mengerti, apa itu Side Navigation? Side Navigation merupakan menu navigasi yang muncul dari sebelah kiri maupun sebelah kanan. 

Sebenarnya Side Navigation tidak jauh berbeda dengan navigasi yang muncul dari atas ke bawah, hanya saja melihat menu yang sering muncul dari sebelah kiri atau kanan jauh lebih bagus dan enak dilihat ketimbang dari bawah ke atas. 

Baca Juga: Cara Mainkan Game Katla Vercel App Yang Sedang Viral di TikTok

Side Navigation yang saya sedang bagikan ini hanya bisa untuk tampilan mobile saja, khususnya VioMagz. Berikut di bawah ini cara membuat menu side navigation hanya menggunakan CSS. 

Cara Membuat Menu Navigasi Samping Di VioMagz

Cara Membuat Menu Navigasi Samping Di Viomagz
Image by: tangkap layar blogger

1. Kalian harus login terlebih dahulu ke hosting blogger kalian di blogger.com2. Pada tampilan dashbord Blogger silahkan pilih menu TEMA lalu pilih EDIT HTML3. Kemudian kalian silahkan cari kode ini /* NAV MENU */ sampai } dan hapus semua kode tersebut lalu ganti dengan kode di bawah ini

Baca Juga  Inilah 7 Tanda-tanda Dalam Tubuhmu Terdapat Parasit, Nomor 2 Jarang Disadari
/* 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:first-child{border-left:none}
#cssmenu > ul > li:last-child{border-right:none}
#cssmenu > ul > li {float: left;margin: 0;}
#cssmenu > ul > li > a {padding: 0 17px;font: bold 12px Helvetica, Arial, sans-serif;line-height: 48px;letter-spacing: 0.8px;text-decoration: none;text-transform: uppercase;color: #ffffff;}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {color: #ffffff;}
#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: "";border-color: #ffffff transparent transparent;border-style: solid;border-width: 4px;height: 0px;width: 0px;display: inline-block;vertical-align: middle;margin-left: 6px;margin-bottom: -2px;}
#cssmenu ul ul li.has-sub > a::after {content: "";border-color: transparent transparent transparent #595959;margin-bottom: 0px;}
#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: #f8f8f8;margin: 0;}
#cssmenu ul ul li:hover {background: #eaeaea;}
#cssmenu ul ul ul{margin-left: 100%;top: 0}
#cssmenu ul ul li a {font: 400 12px Helvetica, Arial, sans-serif;border-bottom: 1px solid rgba(150,150,150,0.15);padding: 0 17px;line-height: 36px;max-width: 100%;text-decoration: none;color: #595959;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: #eaeaea;}
@media screen and (min-width:801px){#cssmenu ul {display: block !important;}}
@media screen and (max-width:800px){
#cssmenu {float: none;}
#cssmenu ul {background: #f8f8f8;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.open {transform:translateX(0px);}
#cssmenu > ul {max-height: calc(100vh - 48px);overflow-y: auto;width: 300px;transition: all 0.7s ease;position: fixed;height: calc(100% - 45px);transform: translate(-300px, 0px);}
#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: #f8f8f8;}
#cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {background: #eaeaea;}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {color: #595959;}
#cssmenu ul ul li a {padding: 0 25px;}
#cssmenu ul li a, #cssmenu ul ul li a {width: 100%;border-bottom: 0;color: #595959;}
#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: bold}
.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: 2px;width: 18px;background: #ffffff;content: '';transition: all 0.2s;}
.mline1 {top: 1px;}
.mline2 {top: 7px;}
.mline3 {top: 13px;}
.button.menu-opened .mline1 {background: #ffffff;top: 3px;border: 0;width: 13px;-webkit-transform: rotate(-45deg);-o-transform: rotate(45deg);-o-transform: rotate(-45deg);-o-transform: rotate(45deg);transform: rotate(-45deg);}
.button.menu-opened .mline2 {top: 7px;left: 2px;width: 19px;}
.button.menu-opened .mline3 {top: 11px;height: 2px;width: 13px;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);}
#cssmenu .submenu-button {position: absolute;z-index: 99;right: 0;top: 0;cursor: pointer;}
#cssmenu .submenu-button::after {content: "";border-color: #595959 transparent transparent;border-style: solid;border-width: 4px;height: 0px;width: 0px;display: inline-block;vertical-align: middle;margin: 20px 20px 14px;}
#cssmenu ul ul .submenu-button::after {margin: 16px 20px 12px;}
#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: non

4. Jika semua kode sudah terpasang silahkan klik simpan. 

Baca Juga  Teori Konspirasi Seputar Kematian Mbak You, Dituding Palsu hingga Keluarga Buka Suara

Baca Juga: Arti, Makna, dan Tafsir Mimpi Mandi Bersama Lawan

Penutup

Bagaimana? Mudah bukan untuk merubah Navigasi atas bawah menjadi navigasi samping di blogger. 
Kalian hanya perlu mengubah CSS kode pada template VioMagz dan akan menjadi template yang enak dilihat.