Cara Membuat Menu Navigasi Dropdown Responsive di Blog

Serieswans | Cara Membuat Menu Navigasi Dropdown Responsive di Blog - Halo sobat template, Menu Navigasi merupakan hal yang paling penting dan harus ada di sebuah website. mengapa demikian? karena Menu Navigasi ini untuk mempermudah pengunjung blog ketika mencari artikel menurut topik yang dia cari pada blog tersebut, contohnya saja ingin mencari topik mengenai Bloging ataupun Adsense.

Menu Navigasi umumnya terletak di bagian atas (Header) atau di bawah (Footer). jika anda menggunakan template bawaan blognya, biasanya tidak ada menu navigasinyam jadi anda harus menambahkan sendiri dengan menambahkan kode HTML dan CSS ke dalam tempate tersebut.

Menu Navigasi ini berisi link yang menuju halaman postingan, halaman label ataupun halaman lainnya. untuk menu navigasi yang akan saya buat ini tidak kalah keren dengan menu navigasi yang lainnya. menu navigasinya mirip seperti blognya mba igniel versi yang lama. contohnya seperti gambar di bawah ini.

Menu Navigasi Dropdown Responsive

Menu Navigasinya juga sudah memakai icon SVG serta Animasi dan bisa anda rubah warnanya sesuai keinginan anda.

Bagi orang yang masih awam mengenai dunia coding (pemrograman) mengedit template akan terasa sulit dan tidak mudah jika tidak ada yang membantu, tapi selagi niat anda serius ingin belajar, pasti anda akan bisa. oke kita langsung saja ke tutorialnya. silahkan anda simak dan pahami langkah-langkahnya.

tips — Bagi anda pengguna template viomagz, pasti tidak akan kesusahan mencari kodenya. karena tutorial ini sudah saya coba di template viomagz

Cara Membuat Menu Navigasi Dropdown Keren di Blog

Masuk ke blogger.com, pilih menu Tema => Edit HTML

Warning — Pada setiap template biasanya kode navigasinya berbeda, silahkan anda cari dan sesuaikan saja penempatan kodenya.

Silahkan cari kode CSS Menu Navigasi pada template sobat, contohnya #cssmenu
Jika sudah ketemu, silahkan anda block kode CSSnya dan ganti 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: inline-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>i {
    margin-right: 5px
}

#cssmenu>ul>li>a {
    padding: 0 10px;
    font: 450 16px Roboto, Arial, sans-serif;
    line-height: 48px;
    letter-spacing: .8px;
    text-decoration: none;
    text-transform: capitalize
}

#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, .1);
    -webkit-transition: background .2s ease;
    -ms-transition: background .2s ease;
    transition: background .2s ease
}

#cssmenu ul ul li.has-sub>a::after {
    content: "\f0da"
}

#cssmenu ul ul {
    height: auto;
    position: absolute;
    z-index: 1;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15);
    opacity: 0;
    transform: translateY(-8em);
    transition: all 0.3s ease-in-out 0s;
    left: 0;
    right: 0;
    background: #0396c2;
    border-top: 3px solid #000;
    border-bottom: 10px solid #fff;
    transform: translateY(-18em);
    transition: all 0.3s ease;
    opacity: 0;
    padding: 10px;
    border-radius: 10px
}

#cssmenu li:hover>ul {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s
}

ul.allsub li.bulet>a {
    background: #000;
    border: 2px solid #000;
    border-radius: 20px
}

#cssmenu ul ul li:hover {
    animation: ignielShake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px
}

#cssmenu ul ul ul {
    margin-left: 100%;
    top: 0
}

#cssmenu ul ul li a {
    font: 400 15px Roboto, Arial, sans-serif;
    padding: 0 17px;
    line-height: 42px;
    max-width: 100%;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #000;
    border: 1px solid #000;
    border-radius: 20px
}

#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: rgba(31, 34, 39, .29)
}

@media screen and (min-width:801px) {
    #cssmenu ul {
        display: block!important
    }
}

@media screen and (max-width:800px) {
    #cssmenu {
        float: none
    }
    #cssmenu ul {
        background: #fafafa;
        width: 100%;
        display: none;
        height: auto;
        -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15)
    }
    #cssmenu>ul {
        transition-delay: 2s;
        transition: width 4s ease;
        position: fixed;
        display: block;
        width: 250px;
        left: -668px;
        top: 70px;
        margin: 0;
        height: calc(100% - 45px);
        background-color: #0487d3;
        z-index: 999;
        overflow-y: auto;
        list-style-type: none
    }
    #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%
    }
    #cssmenu>ul>li:hover,
    #cssmenu ul li.active:hover,
    #cssmenu ul li.active,
    #cssmenu ul li.has-sub.active:hover {
        background: #f1f3f4
    }
    #cssmenu>ul>li:hover>a,
    #cssmenu ul li.active a {
        background: #0578e4
    }
    #cssmenu ul ul li a {
        padding: 0 25px
    }
    #cssmenu ul li a,
    #cssmenu ul ul li a {
        width: 100%;
        border-bottom: 0
    }
    #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: 700
    }
    .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: #fff;
        content: '';
        transition: all 0.2s
    }
    .mline1 {
        top: 2px
    }
    .mline2 {
        top: 7px
    }
    .mline3 {
        top: 12px
    }
    .button.menu-opened .mline1 {
        background: #fff;
        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;
        background: #fff
    }
    .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);
        -o-transform: rotate(45deg)
    }
    #cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        cursor: pointer
    }
    #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
    }
}


/* LABEL NAV */

#cssmenu .widget-content.list-label-widget-content {
    padding: 0;
    text-align: center
}

.label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
    font-size: 100%
}

.cloud-label-widget-content {
    text-align: left;
    display: block
}

.widget-content.list-label-widget-content {
    padding: 0 7px
}

.label-size {
    transition: all .25s;
    -moz-transition: all .25s;
    -webkit-transition: all .25s;
    background-color: #fff;
    display: block;
    float: left;
    margin: 0 5px 5px 0;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase
}

.label-size a,
.label-size span {
    display: inline-block;
    color: #fff!important;
    padding: 6px 8px
}

.label-size:hover {
    background: #fff;
}

.label-count {
    white-space: nowrap;
    padding-right: 3px;
    margin-left: -3px;
    background: #fff;
    color: #fff!important
}

.label-size {
    line-height: 1.2
}

#cssmenu li {
    padding: 0;
    display: inline-block;
    border: 1px solid #fff
    border-radius: 0;
    -moz-border-radius: 7px;
    margin: 3px;
    transition: all .3s ease
}

#Label2 li:active,
#cssmenu li:focus,
#cssmenu li:hover {
}

#cssmenu li a {
    color: #fff;
    text-decoration: none;
    padding: 7px 20px 8px 10px;
    display: inline-block;
    font-weight: 400;
    font-size: 13px;
    text-transform: none
}

#cssmenu li .label-terpilih {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    background-color: #fff;
    transition: all .3s ease
}

#cssmenu li .label-counter {
    color: #fff;
    padding: 8px 0;
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 100px;
    text-align: center;
    font-size: 11px;
    position: relative;
    right: 6px;
    transition: all .3s ease
}

#cssmenu li:hover .label-counter {
    color: #fff;
    transition: all .3s ease
}

#cssmenu li a:before,
.list-label-widget-content ul li a:before {
    margin-right: 10px;
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: -5px;
    background-repeat: no-repeat!important;
    content: ''
}

#cssmenu li.CSS a:before {
    background: url("data:image/svg+xml,")
}

#cssmenu li.Facebook a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Instagram a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Instant.Articles a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Javascript a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Messaging a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Template a:before {
    background: url("data:image/svg+xml,")
}

#cssmenu li.Penulis a:before {
    background: url("data:image/svg+xml,")
}

#cssmenu li.Tool.Gratis a:before {
    -webkit-mask-image: url("data:image/svg+xml,");
    animation: ignielSpin 1.25s linear infinite normal;
    -webkit-animation: ignielSpin 1.25s linear infinite normal
}

#cssmenu li.Twitter a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Video a:before {
    background: url("data:image/svg+xml,")
}

#cssmenu li.Youtube a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Home a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Blogger a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.seo a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.bulet a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Adsen a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.pempro a.pemproicon:before {
    -webkit-mask-image: url("data:image/svg+xml,");
    -webkit-animation: ignielSpin 1.25s linear infinite normal
}

#cssmenu li.bhtml a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.android a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.review a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.komputer a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.games a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.tkj a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.bisnis a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.info a:before {
    -webkit-mask-image: url("data:image/svg+xml,")
}

#cssmenu li.Tool.Gratis {
    background-color: #b00;
    border: 0
}

#cssmenu li.Tool.Gratis:hover {
    background-color: red
}

#cssmenu a:before {
    background-color: #fff
}

@keyframes ignielSpin {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes ignielSpin {
    from {
        -webkit-transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

Kemudian cari Kode HTML Menu Navigasinya, contonya kodenya biasanya di awali dengan kode <nav> dan di akhiri dengan kode </nav>.
Jika sudah ketemu, silahkan ganti dengan kode HTML di bawah ini

<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</div>
<ul itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<li class='Penulis' itemprop='name'><a href='#'>PENULIS TAMU</a></li>
<li class='pempro' itemprop='name'><a aria-label='kategori' class='pemproicon dropbawah' itemprop='url'>KATEGORI ARTIKEL</a>
<ul class='allsub dropdown-menu'>
<li class='Template' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Template</a></li>
<li class='Blogger' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Tips Blogger</a></li>
<li class='android' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Tips Android</a></li>
<li class='komputer' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Tips Komputer</a></li>
<li class='Youtube' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Tips Youtube</a></li>
<li class='Adsen' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Tips Adsense</a></li>
<li class='bisnis' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Bisnis Online</a></li>
<li class='games' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Games</a></li>
<li class='review' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Review</a></li>
<li class='info' itemprop='name'><a dir='ltr' href='#' itemprop='url'>Info Menarik</a></li>
<li class='seo' itemprop='name'><a dir='ltr' href='#' itemprop='url'>SEO</a></li>
<li class='tkj' itemprop='name'><a dir='ltr' href='#' itemprop='url'>TKJ</a></li>
</ul>
</li>
</ul>
</nav>

tips — Ganti tanda # dengan url halaman blog anda, contohnya

<a href='https://www.serieswans.com/p/mengenal-apa-itu-guest-post-atau.html'>PENULIS TAMU</a

Setelah itu copy HTML di bawah ini dan letakan di atas kode </head> atau </body>

<style>.info-1,.info-2,h2.post-title,.post-snippet{margin-left:2px}@media only screen and (max-width:1080px){.info-1,.info-2,h2.post-title,.post-snippet{margin-left:2px;font-size:14px}}.pempro &gt; a:after{margin-bottom: 10px;width:24px; height:24px; vertical-align:bottom; display:inline-block; margin-left:5px; transition:all 0.3s ease; background: url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%23fff'/></svg>&quot;) no-repeat; content:&#39;&#39;}.pempro &gt; a:hover::after, #cssmenu:hover &gt; a:after{width:24px; height:24px; vertical-align:bottom; display:inline-block; margin-left:5px; transition:all 0.3s ease; transform:rotate(180deg); background: url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%231d2129'/></svg>&quot;) no-repeat; content:&#39;&#39;}@media only screen and (max-width:800px){.info-1,.info-2,h2.post-title,.post-snippet{margin-left:2px}}.pempro &gt; a:after{margin-bottom: 10px;width:24px; height:24px; vertical-align:bottom; display:inline-block; margin-left:5px; transition:all 0.3s ease; background: url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%23fff'/></svg>&quot;) no-repeat; content:&#39;&#39;}.pempro &gt; a:hover::after, #cssmenu:hover &gt; a:after{width:24px; height:24px; vertical-align:bottom; display:inline-block; margin-left:5px; transition:all 0.3s ease; transform:rotate(180deg); background: url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%231d2129'/></svg>&quot;) no-repeat; content:&#39;&#39;}@media only screen and (max-width:640px){.info-1,.info-2,h2.post-title,.post-snippet{margin-left:2px}}@media only screen and (max-width:568px){.info-1,.info-2,h2.post-title,.post-snippet{margin-left:1px;font-size:10px}}@media only screen and (max-width:480px){.info-1,.info-2,h2.post-title,.post-snippet{margin-left:1px;font-size:16px;margin-bottom:30px}}</style>

Setelah itu simpan dan cek hasilnya

Nah, mungkin itu saja pembahasan tutorial kali ini mengenai Cara Membuat Menu Navigasi Dropdown Responsive di Blog . jika ada masih kebingungan mencari kode navigasinya, silahkan tanyakan di kolom komentar, nanti saya bantu semampu saya. semoga bermanfaat

6 komentar

Jago Redesign
Mei 31, 2020Mei 31, 2020
Hapus Komentar
Salin Permalink
Kunjungi profil
icon svgnya kok gk muncul gan
Sembunyikan BalasanLihat Balasan (1)
- Kurniawan
  Mei 31, 2020Mei 31, 2020
  
  Hapus Komentar
  Salin Permalink
  Kunjungi profil
  Coba mas cek lagi kode icon svg di CSS nya
Agung Irianto
Maret 08, 2020Maret 08, 2020
Hapus Komentar
Salin Permalink
Kunjungi profil
Mantapp gan. Request buat tutor garis putus2 juga bang yang seperti disebelah Sorotan blog agan🙏
Sembunyikan BalasanLihat Balasan (1)
- Kurniawan
  Mei 31, 2020Mei 31, 2020
  
  Hapus Komentar
  Salin Permalink
  Kunjungi profil
  Oke gan siapp , nanti saya buatkan
Nurul Huda
Maret 02, 2020Maret 02, 2020
Hapus Komentar
Salin Permalink
Kunjungi profil
Mantab mas, sukses selalu
Sembunyikan BalasanLihat Balasan (1)
- Kurniawan
  Maret 07, 2020Maret 07, 2020
  
  Hapus Komentar
  Salin Permalink
  Kunjungi profil
  Aamiin mas 🤲

Cara Membuat Menu Navigasi Dropdown Responsive di Blog

Cara Membuat Menu Navigasi Dropdown Keren di Blog

Related Posts

6 komentar