Share Ilmu

Menu dropdown adalah menu navigasi yang mempunyai efektifitas dalam jalan pintas menuju opsi-opsi yang ditawarkan si-empunya blog, hemat tempat & bahkan bisa menarik perhatian para blogger ketika tampilan menunya sangat cantik. Ada berbagai model menu dropdown, mulai yang horisontal seperti pada blog ini yang terletak di bawah header, ada pula yang vertikal di samping posting blog.
Baru-baru ini mulai banyak yang sudah memakai model floating menu yaitu sebuah tampilan yang mengadopsi menu dropdown dengan kelebihan ketika halaman kita sorot ke bawah, menu ini akan tetap pada tempatnya alias melayang & semoga jika ada waktu akan saya posting juga cara pembuatannya. Beberapa macam pembuatan dropdown yang saya bahas ini hampir semuanya masuk ke opsi edit HTML, itulah yang membuat saya malas pake cara itu karena jika kita tidak hati-hati dalam memprosesnya bisa membuat berantakan susunan template, parahnya lagi akan terjadi banyak kode yang mungkin masih tertinggal yang berakibat membuat loading blog kita semakin lambat dan berat. Tap jangan khawatir, setelah beberapa kali saya cari-cari akhirnya ketemu juga cara buat menu dropdown tanpa masuk opsi EDIT HTML ini. Langsung saja ikuti langkah Berikut ini:


1. Login dulu ke blog anda

2. Pilih dulu blog yang akan anda pasang menu ini

3. Klik TATA LETAK >> ADD GADGET >> HTML JAVA SCRIPT

4. Copi paste-kan & masukkan kode di bawah ini pada kolom yang sudah ada

 <style>
/*------ CSS3 Drop Down Menu By www.go-blogger96.blogspot.com ---------*/
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #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>
<ul id="menu">
<li><a href="URL blog anda ">Home</a></li>
<li><a href="URL blog anda ">Categories</a>
<ul>
<li><a href="URL blog anda ">CSS</a></li>
<li><a href="URL blog anda ">Graphic design</a></li>
<li><a href="URL blog anda ">Development tools</a></li>
<li><a href="URL blog anda ">Web design</a></li>
</ul>
</li>
<li><a href="URL blog anda ">Work</a></li>
<li><a href="URL blog anda ">About</a></li>
<li><a href="URL blog anda ">Contact</a></li>
</ul>

5. Tag lalu seret untuk diletakkan posisinya di bawah header

6. Silahkan kamu ganti URL-nya dengan URL blog anda

7. Terakhir klik save lalu lihat  hasilnya. Selamat mencoba.

Jika ada kesulitan silahkan sharing dengan berkomentar di bawah sini.