Cara Menciptakan Sajian Navigasi Dropdown

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

 

Pengunjung yang tiba pun niscaya dapat lebih gampang untuk menemukan daftar sajian di blog kita kalau menggunakan widget ini. Misalnya saat pengunjung membaca salah satu artikel di blog Anda, beliau akan gampang kembali ke halaman utama dengan menentukan sajian Home yang sudah tersedia di widget ini. Atau dapat juga digunakan untuk menampilkan Data eksklusif admin Blog, Contact Person, maupun hak cipta dari blog yang bersangkutan. Dibawah ini yaitu teladan sajian 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 isyarat ]]></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 isyarat menyerupai 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 kalau tidak ditemukan, cari isyarat menyerupai 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 sempurna dibawah isyarat </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 goresan pena berwarna Biru dengan warna yang diinginkan. Untuk cek isyarat warna HTML klik DISINI
• Ganti Tulisan Berwarna Merah dengan Alamat URL yang diinginkan
• Ganti goresan pena berwarna Hijau dengan Nama Menu yang diinginkan

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

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

Berbagi :