Cara Membuat Menu Drop Down Blogspot dengan Mudah



Menu Drop Down merupakan suatu navigasi yang banyak di gunakan pada website ataupun blog agar tampilannya terlihat lebih interaktif, banyak cara untuk membuat menu dropdown salah satunya yang termudah adalah seperti cara di bawah.

yang pertama login terlebih dulu pada halaman blogspot, setelah itu klik menu layout kemudian klik add a gadget pilih HTML/JavaScrip dan copykan kode dibawah, supaya menu ada di atas geser gadget yang tadi dibuat masukan ke halaman main dan save.

Supaya menu link ke halaman blog yang kita inginkan silahkan ganti "#" tanda pager dengan Link yang dimau.

Contoh
<li><a href="#">Menu 1</a></li>
ganti menjadi
 <li><a href="http://masbudicahyono.blogspot.co.id/">Menu 1</a></li>
 
Copy Link yang di bawah ke dalam gadget yang kita buat.


<style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>
<!-- Mulai Area Menu -->
<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="Home" href="http://masbudicahyono.blogspot.co.id/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>

<!-- Mulai Menu Dropdown -->
<li><a class="sub" href="#">Menu</a>  <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Sub Menu 0</a></li>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>

</ul>
</li>
<!-- Selesai Menu Dropdown-->  </ul>
</nav>
<!-- Area Menu Selesai-->

15 comments:

  1. Mantap Mas Brooo.... saya coba .........

    ReplyDelete
  2. Well we really like to visit this site, many useful information we can get here.

    গ্যাজেট ৩৬০

    ReplyDelete
  3. Terima kasih, sudah saya coba. Untuk gabungan gimana ya? Kalau script di atas digabung dengan menu drop down?

    ReplyDelete
  4. terima kasih banyak untuk ilmunya mas,.

    ReplyDelete
  5. saya coba tapi kenapa tetep gak muncul ya drop down nya

    ReplyDelete
  6. Artikel yang sangat bermanfaat. Saya sudah berhasil mempraktikkannya. Terima kasih.

    ReplyDelete
  7. Nggk Work gan tolong di perbaiki dong

    ReplyDelete

Powered by Blogger.