Cara Membuat Menu Navigasi Dropdown

Menu Navigasi adalah salah satu widget yang berfungsi untuk mengkategorikan sebuah menu tertentu di dalam Blog. Biasanya widget ini dipasang di bawah header Blog. Selain itu, menu ini juga menambah penampilan Blog terlihat lebih Profesional.

 

Pengunjung yang datang pun pasti bisa lebih mudah untuk menemukan daftar menu di blog kita jika memakai widget ini. Misalnya ketika pengunjung membaca salah satu artikel di blog Anda, dia akan mudah kembali ke halaman utama dengan memilih menu Home yang sudah tersedia di widget ini. Atau bisa juga dipakai untuk menampilkan Data pribadi admin Blog, Contact Person, maupun hak cipta dari blog yang bersangkutan. Dibawah ini adalah contoh menu navigasi Dropdown di salah satu blog saya:

Tertarik untuk memasangnya? Bagaimana caranya?

Cara Membuat Menu Navigasi Dropdown

1. Login ke akun Blogger
2. Pilih Template >> Edit HTML
3. Copy-paste script berikut di atas kode ]]></b:skin>

/* Menu Nav */
#menu{background-color:#014B84; font:12px Verdana; font-weight:bold; padding:0px 0px; border-top:0px solid #0A5EA7;border-bottom:0px solid #0A5EA7; border-right:0px solid #0A5EA7;border-left:0px solid #0A5EA7; position:relative; margin-left: 120px; margin-right: 120px}
#menu li{background-color:#014B84; border-right: 0px solid #0A5EA7; border-left: 0px solid #0A5EA7;border-top:0px solid #0A5EA7; border-bottom:0px solid #0A5EA7; margin:0; padding:0; list-style:outside none none; height:30px}
#menu ul{background-color:#014B84; border-right: 1px solid #0A5EA7; border-left: 1px solid #0A5EA7;border-top:1px solid #0A5EA7; border-bottom:1px solid #0A5EA7; margin:0; padding:0; list-style:none; height:30px}
#menu li{float:left; display:inline; position:relative; height:auto}
#menu a{display:block; line-height:29px; color:white; text-decoration:none; padding:0 10px 0 10px; text-shadow:none}
#menu li ul{background-color:#014B84; border:0px solid black; position:absolute; top:100%; left:0; width:180px; height:auto; z-index:88; box-shadow:0 0 0px rgba(0,0,0,.35); -moz-box-shadow:0 0 30px rgba(0,0,0,.35); -webkit-box-shadow:0 0 30px rgba(0,0,0,.35); display:none}
#menu li li{float:none; display:block; border-bottom:1px solid #0A5EA7}
#menu li ul a{color:#fff; height:30px; line-height:30px; padding:0 15px; text-shadow:none}
#menu li ul a:hover{color:#fff}
#menu li a:hover{background:#014B84}
#menu li a:focus{background:#014B84}
#menu li:hover a{background:#014B84}
#menu ul a:hover{background:#02345D}
#menu li:hover ul.hidden{display:block}

4. Setelah itu cari kode seperti di bawah ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
</b:section>

atau jika tidak ditemukan, cari kode seperti ini:

<div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
    <b:includable id='description'>---</b:includable>
    <b:includable id='title'>---</b:includable>
  </b:widget>
</b:section>

5. Letakkan script berikut tepat dibawah kode </b:section>
<!-- Navigation On Dekstop -->
<div id='menu'>
<div class='menu'>
<ul>
<li><a expr:title='data:blog.title' href='ISI LINK URL KAMU'>Home</a></li>
<li class='submenu'><a href='ISI LINK URL KAMU'>About Me</a>
<ul class='hidden'>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Ingin Kenal Dengan Saya Lebih Lanjut ?'>Facebook</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Ingin Kenal Dengan Saya Lebih Lanjut ?'>Twitter</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Ingin Kenal Dengan Saya Lebih Lanjut ?'>Pinterest</a></li>
</ul>
</li>
<li class='submenu'><a href='#'>Menu1</a>
<ul class='hidden'>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu1'>Sub Menu1</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu2'>Sub Menu2</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu3'>Sub Menu3</a></li>
</ul>
</li>
<li class='submenu'><a href='#'>Menu2</a>
<ul class='hidden'>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu1'>Sub Menu1</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu2'>Sub Menu2</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu3'>Sub Menu3</a></li>
</ul>
</li>
<li class='submenu'><a href='#'>Menu3</a>
<ul class='hidden'>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu1'>Sub Menu1</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu2'>Sub Menu2</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu3'>Sub Menu3</a></li>
</ul>
</li>
<li class='submenu'><a href='#'>Submit URL</a>
<ul class='hidden'>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu1'>Sub Menu1</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu2'>Sub Menu2</a></li>
<li><a href='ISI LINK URL KAMU' target='_blank' title='Sub Menu3'>Sub Menu3</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div style='clear:both'/>
<!-- Navigation Closed -->

6. Simpan Template

Catatan:

• Ganti tulisan berwarna Biru dengan warna yang diinginkan. Untuk cek kode warna HTML klik DISINI
• Ganti Tulisan Berwarna Merah dengan Alamat URL yang diinginkan
• Ganti tulisan berwarna Hijau dengan Nama Menu yang diinginkan

Coba saja bereksperimen sendiri sesuai kebutuhan template, karena kita harus terbiasa menghadapi kode-kode seperti ini untuk mendekorasi sebuah blog.

Itulah sekilas pemahaman saya tentang Cara Membuat Menu Navigasi Dropdown. Semoga bermanfaat. Jika mencari artikel yang lainnya, silahkan cek di bawah ini: