Cara Membuat Menu di Blog, Dijamin Bisa!

Kali ini Rafif Blog's akan membagikan Trik tentang Cara Membuat Menu di Blog, Dijamin Bisa! . Sekarang ini menu blog sangat dibutuhkan untuk blog yang kita miliki, karena ini menambah kemudahan bagi pembaca blog kita untuk melihat konten yang sesuai dengan yang ia cari. Berikut langkah-langkah membuat menu di blog.

1. Pertama buka akun blogger anda.

2. Kemudian anda ambil menu template, dan pilih edit HTML

3. Lalu cari kode ini 

<b:skin><![CDATA[/*

    Agar lebih mudah, gunakan Ctrl + F
4. Setelah anda mendapatkan kode tersebut pasang kode ini di bawah kode tersebut

body#layout .secondary-navigationnbt {display:none;}

5.Lalu setelah itu, letakkan kode dibawah ini tepat setelah kode body#layout .secondary-navigationnbt {display:none;}

/*-[ Navigation ]-----------------*/
.secondary-navigationnbt .children li .sf-sub-indicator { display: none }
.secondary-navigationnbt {
    background: #364956;
    display: block;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    min-height: 45px;
}
.secondary-navigationnbt ul li { }
.secondary-navigationnbt a {
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    transition: all 0.25s linear;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    font-family: 'Monda', sans-serif;
}
.secondary-navigationnbt a .sub {
    font-size: 11px;
    font-weight: normal;
    color: #9B9B9B;
}
.sf-js-enabled li a.sf-with-ul { }
.sf-js-enabled li  ul.sf-with-ul { padding-right: 20px }
#navigationnbt .sf-sub-indicator {
    display: block;
    width: 11px;
    overflow: hidden;
    position: absolute;
    right: 7px;
    top: 0;
}
#navigationnbt {
    margin: 0 auto 0;
    font-size: 13px;
    float: left;
    width: 100%;
}
.secondary-navigationnbt a:hover {
    color: #fff;
}
#navigationnbt select { display: none }
#navigationnbt ul {
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
}
#navigationnbt ul li {
    float: left;
    position: relative;
}
#navigationnbt ul .header-search { float: right }
#navigationnbt > ul > li:last-child { border-right: none }
#navigationnbt ul li a, #navigationnbt ul li a:link, #navigationnbt ul li a:visited {
    overflow: hidden;
    display: block;
}
#navigationnbt > ul > .current a {
    background: transparent;
    color: #5a5a5a !important;
}
#navigationnbt ul li li {
    background: #fff;
    width: 100%;
}
#navigationnbt ul ul {
    position: absolute;
    width: 190px;
    padding: 20px 0 0 0;
    padding-top: 0px;
    z-index: 400;
    font-size: 12px;
    color: #798189;
    border: 1px solid #ccc;
}
#navigationnbt ul ul a {
    color: #555555;
    font-weight: normal;
}
#navigationnbt ul ul li {
    padding: 0;
    background: #fff;
}
#navigationnbt ul ul a, #navigationnbt ul ul a:link, #navigationnbt ul ul a:visited {
    position: relative;
    width: 134px;
    margin-left: 8px;
    border-left: 0;
    background: transparent;
    border-right: 0;
    border-bottom: 1px solid #ccc;
}
#navigationnbt ul ul li:first-child a { }
#navigationnbt ul ul li:last-child a { border-bottom: none }
#navigationnbt ul ul {
    opacity: 0;
    left: -999em;
}
#navigationnbt ul li:hover ul {
    left: auto;
    opacity: 1;
}
#navigationnbt ul ul ul { top: -1px }
#navigationnbt li:hover ul ul, #navigationnbt li:hover ul ul ul, #navigationnbt li:hover ul ul ul ul {
    left: -999em;
    opacity: 0;
}
#navigationnbt li:hover ul, #navigationnbt li li:hover ul, #navigationnbt li li li:hover ul, #navigationnbt li li li li:hover ul {
    opacity: 1;
    left: 190px;
}
#navigationnbt ul ul:after {
    left: 10px;
    top: -5px;
}
#navigationnbt ul ul ul:after {
    border-color: transparent #282E33 transparent transparent;
    border-color: transparent rgba(14,19,22,0.92) transparent transparent;
    left: -12px;
    top: 3px;
}

6. Sekarang saatnya anda memasang tag HTMLnya. Cari kode berikut

<div style='clear:both;'/>

7. Setelah itu letakkan kode dibawah ini tepat dibawah kode </div> yang terdapat dibawah kode <div style='clear:both;'/> 

<div class='secondary-navigationnbt'>
<nav id='navigationnbt'>
<ul class='menunbt'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>lorem ipsum</a></li>

<li><a href='#'>lorem ipsum</a>
<ul class='sub-menu'>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul>
</li>

<li><a href='#'>lorem ipsum</a>
<ul class='sub-menu'>
      <li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>

</ul>
</li>

<li><a href='#'>lorem ipsum</a></li>



</ul>
</nav>
</div>

Pengaturannya adalah sebagai berikut :
 kode berwarna biru merupakan nama menu yang akan anda buat
 kode berwarna ungu merupakan link menuju halaman yang anda tuju di menu anda
 kode berwarna merah muda merupakan kode untuk nama sub menu. Sub menu ini bisa anda  hilangkan dengan menghapus kode

<ul class='sub-menu'>
      <li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>

</ul>

 kode berwarna hijau digunakan sebagai background ganti kode ini jika anda ingin menggunakan  warna yang anda sukai
Sekian Tutorial Blog yang dapat Rafif Blog's sampaikan, jika ada pertanyaan, silahkan tanyakan di komentar atau langsung email ke : tanya.jawab.rafifblogs@gmail.com