Cara Buat Dropdown Menu di Blog

Cara Membuat Dropdown Menu di blog - Hmm, Lagi-lagi saya posting tentang dropdown menu hehe gak apa-apa deh, sobat sudah pada tau dropdown menu itu apa kan? Dropdown menu adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi Dropdown menu yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.Dropdown menu kali ini saya buat sendiri kode CSSnya, oke dibawah ini adalah screenshotnya:

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinxHiB5nTlMiGeigwj7IjcETIUcVUQbUJpMZKzBlSzovzMY6oHOec9bJ1MRmy7xjOXbqtJUI5rY1MXqzMnne1snlZxyMpfbGQJZ2DDSWqEP9uDiYoQZRm3RRdRbOsLtuq1Zk8BGexSrwk/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyx91u0772SqnxkzF9XEwgfuXIpXmwjCMzIb4ARUtYxu9gfP5X8YCDGnEhR3VTdV-wskfTo37negnat4HMeLjT4cEY3B04_9lgQTChKqdZ17BK_IGnEu-CdV5FC10f5wlIblmLHWJ4VCn/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwK9T31aQ1V347uGbdOy1SvxYxasMhHDFoSHaWqmpa0RSJS4NzUycdTuaPkBb1-bOH7xfbnnoB91t_noEGJq84b_fQirB92BD34hlFNG7w5kWKswcVg6Cb0Thcvj0UPnJ4RI4GuVhBR0/s1600/nav.png) repeat-x}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinxHiB5nTlMiGeigwj7IjcETIUcVUQbUJpMZKzBlSzovzMY6oHOec9bJ1MRmy7xjOXbqtJUI5rY1MXqzMnne1snlZxyMpfbGQJZ2DDSWqEP9uDiYoQZRm3RRdRbOsLtuq1Zk8BGexSrwk/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}

Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSI7vMU4B8tvWvqA_fyq_FlbgDWp_5mkr4VoL-nC21tJibWTgqsmDwCiqJiOpDoPSXCSbLch2QGifW6ZlRxl3IOh_SaYG4Sc7Rnq9bGneaiY5w1OlCsVK6EEjB-wIcWH30eM3E0nO5tEu/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Perhatian!
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
4. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.

Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Membutuhkan Navigasi Dropdown Menu , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih