Cara Membuat Slide menu Navigasi di Blogger

Cara membuat Slide menu Navigasi di Blogger - Menu navigasi template blogger berbeda beda,banyak dari para konsumen yang tidak puas dengan beberapa desain template blog.maka munculah pikiran untuk.sedikit memodifikasi tampilan agar lebih sesuai selera pengguna template tersebut.Ada template blogger premium yang desain menu navigasi nya berbentuk dropdown ada pula desain memu navigasi yang berupa slide menu atau menu navigasi akan muncul dari samping saat di buka.Ya namanya saja manusia pasti akan ada rasa kurang puas meskipun di buatkan suatu hal yang istimewa bagi orang lain.

Tenang karena kalian bisa membuat dan memasang slide menu navigasi semdiri di template blog kalian.Sebenarnya saya sendiri memang bingung saat pertama kali ngeblogging,karena saat saya menentukan template ambil.contoh saya suka dengan tampilan viomagz namun saya juga suka tampilan navigasi igniplex,ingung bukan ?akhirnya pasti akan mencari cara sendiri untuk mengubah sedikit desain dari si viomagz dengan memodifikasi menu navigasi menjadi mirip igniplex dan lain lain.

Kalau kalian membuat suatu blog dengan niche tertentu pasti kalian akan mencari pula beberapa template yang sangat cocok untuk tampilan niche blog tersebut.Ambil contoh kalian ingin membuat blog sengan niche teknogi namun kalian kurang cocok dengan template yang sedang kalian gunakan.mka kalian bisa mencoba untuk mendesain sedikit dari tema tersebut agar tampilan blog lebih kental dengan nuansa teknologi .

Kembali lagi pada topik pembahasan tentang cara membuat slide menu navigasi di blog kalian bisa membuatnya dengan mengikuti beberapa langkah di bawah ini di khususkan bagi yang menggunakan Viomagz kalian hanya perlu mengganti salah satu kode saja.Bagaimana caranya  ? mari kita simak artilel berikut.

Cara Membuat Slide Menu Navigasi di Blogger

1.Loging Blogger

2.Buka Dashboard>>Tema>>Edit HTML

3.Cari kode /* NAV MENU */

/* 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: 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 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: 3px; width: 22px; background: #ffffff; 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: #ffffff; -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: #ffffff; 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: ""; 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: none } }

4.dan kalian ganti semua kode di atas dengan kode di bawah 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: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: none}}

5.Selanjutnya kalian klik simpan tema

Kesimpulan

Sedikit artikel tutorial di atas semoga bisa membantu kalian.Bagi pengguna Viomagz maka kalian tidak perlu susah susah untuk membuat slide menu navigasi karena kalian cukup mengikuti langkah langkah diatas yang sudah systemauni buatkan.

Sekian artikel Cara membuat Slide menu Navigasi di Blogger.

Berbagi :