Cara Membuat Menu Navigasi Dropdown Responsive di Blog

By Kurniawan Updated: 2020-09-17T14:55:21Z 6 ·

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

Tags Blogger

SHARE Facebook Whatsapp

Tutup Komentar

6 Komentar

Nurul HudaMaret 02, 2020
Mantab mas, sukses selalu
BalasHapus
Balasan
Agung IriantoMaret 08, 2020
Mantapp gan. Request buat tutor garis putus2 juga bang yang seperti disebelah Sorotan blog agan🙏
BalasHapus
Balasan
Jago RedesignMei 31, 2020
icon svgnya kok gk muncul gan
BalasHapus
Balasan

Tambahkan komentar

Balasan

Mohon Tinggalkan jejak sesuai dengan judul artikel.
Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
Dilarang mencantumkan link aktif di komentar.
Komentar dengan link aktif akan otomatis dihapus
Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
```
<i>#comments</i>
```
Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
```
<em>#comments {margin:0; padding:10px 15px}</em>
```

Cara Membuat Menu Navigasi Dropdown Responsive di Blog

Cara Membuat Menu Navigasi Dropdown Keren di Blog

Related Posts

6 Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel