Membuat Menu Drop Down Tanpa Edit HTML Template

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

 

Membuat Menu Drop Down Tanpa Edit HTML Template. Beberapa waktu yang lalu saya pernah memposting artikel tentang bagaimana cara membuat seperti ini, Cuma bedanya pada posting kali ini adalah adanya menu drop down.

sedikit pengertian tentang menu drop down adalah, sebuah menu Link yang apabila di sentuh mouse akan ada menu link yang jatuh ke bawah. Sebagai Contohnya sobat bisa melihat pada bagian bawah posting ini, silahkan sobat coba arahkan kursor mouse sobat ke arah menu, nanti sobat akan mengetahui link yang jatuh ke bawah. Oke sobat langsung saja simak tutorialnya di bawah ini:

Cara Membuat Menu Drop Down Tanpa Edit HTML Template.

1. Silahkan Masuk ke Account Bloger Anda.
2. Pilih Tata letak / LayOut.
3. Pilih Add Gadget / Tambahkan Gadget.
4. Copy dan Paste Kode Di bawah ini pada Kolom Add Gadget tadi.
Kode.

 <style> #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #FF0000; background: -moz-linear-gradient(#FF0000, #000000); background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 0px #9c9c9c; -webkit-box-shadow: 0 2px 0px #9c9c9c; box-shadow: 0 2px 0px #9c9c9c; } #menu li { float: left; padding: 0 0 10px 0; position: relative; line-height: 0; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover /* IE6 */ { color: #fafafa; } #menu li:hover > ul { display: block; } /* Sub-menu */ #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5); -moz-border-radius: 5px; border-radius: 2px; } #menu ul ul { top: 0; left: 150px; } #menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */ { height: 10px; } *:first-child+html #menu ul a /* IE7 */ { height: 10px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul ul li:first-child a:after { left: -8px; top: 12px; width: 0; height: 0; border-left: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #04acec; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ </style><br /> <br /> <ul id="menu"><li><a href="https://www.blogger.com/">Home</a></li> <li><a href="http://arpusa.blogspot.com/" rel="nofollow" target="_blank">Drop menu</a><br /> <ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 1</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 2</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 4</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 5</a></li> </ul></li> <li><a href="http://arpusa.blogspot.com/" rel="nofollow" target="_blank">Drop menu 2</a><br /> <ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 1</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 2</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3</a><br /> <ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.1</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.2</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.3</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3.4</a></li> </ul></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 4</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 5</a></li> </ul></li> <li><a href="http://arpusa.blogspot.com/" rel="nofollow" target="_blank">Drop menu 3</a><br /> <ul><li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 1</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 2</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 3</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 4</a></li> <li><a href="http://arpusa.blogspot.com/" rel="dofollow" target="_blank">Menu 5</a></li> </ul></li> </ul>

5. Selesai Klik Save/Simpan.

Keterangan:
* Silahkan Sobat ganti Arpusa.blogspot.com sesuai dengan link URL yang Sobat Inginkan.

Baca Juga:
Cara Mudah Membuat Menu Horizontal Tanpa Edit HTML Template

Contoh/Demo Menu Drop Down

• Home
• Drop menu
  
  • Menu 1
  • Menu 2
  • Menu 3
  • Menu 4
  • Menu 5
• Drop menu 2
  
  • Menu 1
  • Menu 2
  • Menu 3
    
    • Menu 3.1
    • Menu 3.2
    • Menu 3.3
    • Menu 3.4
  • Menu 4
  • Menu 5
• Drop menu 3
  
  • Menu 1
  • Menu 2
  • Menu 3
  • Menu 4
  • Menu 5

Demikian Tutorial tentang Bagaimana Cara Membuat Menu Drop Down Tanpa Edit HTML Template pada Blogspot. semoga tutorial ini bermanfaat bagi sobat semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Artikel Terkait