Fantastic menu dropdown dengan Rounded Corner untuk blog anda

Selamat datang kembali pada tutorial menu dropdown. Kali ini kita akan membuat sebuah menu dropdown dengan tampilan yang rada fantastic dan bersinar. Seperti biasa kita akan membuatnya dengan menambahkan gadget HTML/Javascript, karena tipe gadget ini adalah tipe yang dapat dijadikan bentuk apapun untuk mempercantik blog anda, sehingga anda tidak perlu mengubah xml file template yang mewajibkan konversi ke HTML Entities.
Sudah tidak sabar ingin membuatnya? Ok mari kita ikuti langkah-langkahnya.

• Masuk ke blogger anda, kemudian pilih blog yang ingin anda pasangkan menu dropdown.
• Pilih Tata Letak dan klik tambahkan Gadget (letaknya sebaiknya ditempatkan di bawah header anda)
• Pada pilihan Gadget, pilihlah gadget dengan tipe HTML/Javasscript
• Untuk bagian Judul dikosongkan saja, sedangkan untuk bagian Konten nya isikan dengan kode berikut:

<style type="text/css"> @charset "utf-8";
body { padding: 25px;
}
.nav-container-outer { background: #990000; padding: 0px; height: 74px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBs0uAMTRdZndYtLCo-EXSonDJsAWJ_OStQz9Ba_v6UN4MfEIVwIaZO9p-N8QAXk4_DcscGxR1i8DFMqZnsbNopKg0RuiSbT1rWNcPtCIGuJ56HFRPiJ_LsaQnfmh-xfFVhIFqskH07O0/);
}
.float-left { float: left;
}
.float-right { float: right;
}
.nav-container .divider { display: block; font-size: 1px; border-width: 0px; border-style: solid;
}
.nav-container .divider-vert { float: left; width: 0px; display: none;
}
.nav-container .item-secondary-title { display: block; cursor: default; white-space: nowrap;
}
.clear { font-size: 1px; height: 0px; width: 0px; clear: left; line-height: 0px; display: block; float: none;
}
.nav-container { position: relative; zoom: 1; margin: 0 auto;
}
.nav-container a, .nav-container li { float: left; display: block; white-space: nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li { float: none;
}
.nav-container ul { left: -10000px; position: absolute;
}
.nav-container, .nav-container ul { list-style: none; padding: 0px; margin: 0px;
}
.nav-container li a { float: none
}
.nav-container li { position: relative;
}
.nav-container ul { z-index: 10;
}
.nav-container ul ul { z-index: 20;
}
.nav-container ul ul ul { z-index: 30;
}
.nav-container ul ul ul ul { z-index: 40;
}
.nav-container ul ul ul ul ul { z-index: 50;
}
li:hover>ul { left: auto;
}
#nav-container ul { top: 100%;
}
#nav-container ul li:hover>ul { top: 0px; left: 100%;
}
#nav-container a { padding: 7px 17px 7px 18px; margin: 10px 0px 0px 0px; color: #FFFFFF; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size: 14px; text-decoration: none; font-weight: bold; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJrrxQ5n7uT4z2tbSdn75Mo23w9KX5EoailKsvS3Q8V3szgrbc-rO6w4-ueXMMuf89jPWcPqVgqa2S9O8sdkZza9If9fzJOMKgNbe3gquqyvi3ADlIjSGzWmaGkVCyyAt7jTGBUpTfnc/); background-repeat: no-repeat; background-position: top;
}
#nav-container a:hover { color: #6C3600; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJrrxQ5n7uT4z2tbSdn75Mo23w9KX5EoailKsvS3Q8V3szgrbc-rO6w4-ueXMMuf89jPWcPqVgqa2S9O8sdkZza9If9fzJOMKgNbe3gquqyvi3ADlIjSGzWmaGkVCyyAt7jTGBUpTfnc/); background-repeat: no-repeat; background-position: center;
}
#nav-container div, #nav-container ul { padding: 10px 4px 10px 4px; margin: 0px 0px 0px 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIwrUgTGEuG7qReaHA0qgZV4KM-1Trzp2fCIvgPOjpEp-LyGmPro51sS3h8WNX1zKkalhlQrz57vPwGFNXVXweWr1LteWWv9lupI9y-U5-m2BZmYDRriLfCTaBKYn6hWjQXssGXo_fRY/); background-repeat: repeat-x; background-color: #FF9900; border-bottom: 1px solid #CA6500;
}
#nav-container div a, #nav-container ul a { padding: 3px 10px 3px 6px; background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmY2C8LfCA4oDZuKT34qiQXFemyY5qGjvxP9s0eZnWjrCGQITJHqiu46uFzjwwBXJ-r1dC7KRI014vHedRQAl-5HAfQcb4lqCEo9V0RGhc0Lq0VGo9TYCggd7XilWIU9RncuOGeXfJ4Bo/); background-repeat: no-repeat; background-position: 0px 22px; font-size: 11px; border-width: 0px; border-style: none; margin: 0px 0px 0px 0px; width: 149px;
}
#nav-container div a:hover, #nav-container ul a:hover { background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmY2C8LfCA4oDZuKT34qiQXFemyY5qGjvxP9s0eZnWjrCGQITJHqiu46uFzjwwBXJ-r1dC7KRI014vHedRQAl-5HAfQcb4lqCEo9V0RGhc0Lq0VGo9TYCggd7XilWIU9RncuOGeXfJ4Bo/); background-repeat: no-repeat; color: #CC0000;
}
#nav-container .item-secondary-title { cursor: default; padding: 4px 0px 3px 7px; color: #6C3600; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size: 11px; background-repeat: no-repeat; font-weight: bold;
}
#nav-container .divider-horiz { border-top-width: 1px; margin: 5px 5px; border-color: #C16100;
}
#nav-container .divider-vert { border-left-width: 1px; height: 15px; margin: 4px 2px 0px 2px; border-color: #AAAAAA;
}
</style><div class="nav-container-outer">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVcyumWryQFBOeJ7gPDfPhTLMOt3HK6mknEEKz8amEH_0lORxHXbUkhe4Hb1lNQH51MLbyGazb53mnkiCKZw5ssqKHzW2BNg7aorQajR2ghvRHzMAiaJEO-ovm1oM_2UGqxOJcZ417b5f/s1600/nav-bg-l.jpg" alt="" class="float-left" />  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BB53dFZVC2brCj1NvfxmiTA1ulRNxgshaRU4Y3T5mP-5e4mRdUMPWD2s3I-vVqaH5mo-IFXmdAP6mOrQL2itFgXT6Q2cR2x87Ja9pvA_lUYimZsEBzC8JconlwJfR65VA_5P7ZznhzTU/s1600/nav-bg-r.jpg" alt="" class="float-right" />  <ul id="nav-container" class="nav-container">    <li><a class="item-primary" href="#">HOME</a></li>    <li><span class="divider divider-vert" ></span></li>    <li><a class="item-primary" href="#">Products</a>      <ul style="width:150px;">        <li><a href="#">SoftwarePlus</a></li>        <li><a href="#">MagicDriver</a></li>        <li><a href="#">GreatFX</a></li>        <li><a href="#">SampleSoft</a></li>        <li><a href="#">UnDoIt</a></li>        <li><a href="#">100% CSS Menu</a></li>        <li><a href="#;">With Cross-Browser</a></li>        <li><a href="#;">Dropdowns</a></li>        <li><a href="#;">Absolutely NO Javascript</a></li>        <li><a href="#;">Being Used On</a></li>        <li><a href="#;">These Menus</a></li>        <li><span class="divider divider-horiz" ></span></li>        <li><a href="#;">Example Of a Divider</a></li>        <li><a href="#;">With No Title</a></li>      </ul>    </li>    <li><span class="divider divider-vert" ></span></li>    <li><a class="item-primary" href="#">Quality</a>      <ul style="width:150px;">        <li><a href="#">SoftwarePlus</a></li>        <li><a href="#">MagicDriver</a></li>        <li><a href="#">GreatFX</a></li>        <li><a href="#">SampleSoft</a></li>        <li><a href="#">UnDoIt</a></li>        <li><a href="#">100% CSS Menu</a></li>        <li><a href="#;">With Cross-Browser</a></li>        <li><a href="#;">Dropdowns</a></li>        <li><a href="#;">Absolutely NO Javascript</a></li>        <li><a href="#;">Being Used On</a></li>        <li><a href="#;">These Menus</a></li>        <li><span class="divider divider-horiz" ></span></li>        <li><a href="#;">Example Of a Divider</a></li>        <li><a href="#;">With No Title</a></li>      </ul>    </li>    <li><span class="divider divider-vert" ></span></li>    <li><a class="item-primary" href="#">Services</a>      <ul style="width:150px;">        <li><span class="item-secondary-title" >Title For Links</span></li>        <li><a href="#">These Links Still Appear</a></li>        <li><a href="#">Just Like The Others</a></li>        <li><a href="#">Even When Under A Title</a></li>        <li><span class="divider divider-horiz" ></span></li>        <li><span class="item-secondary-title" >Title After Divider</span></li>        <li><a href="#">Once Again...</a></li>        <li><a href="#">These Links Still Appear</a></li>        <li><a href="#">Just Like The Others</a></li>        <li><a href="#">Even When Under A Title</a></li>      </ul>    </li>    <li><span class="divider divider-vert" ></span></li>    <li><a class="item-primary" href="#;">Very Long Item</a>      <ul style="width:150px;">        <li><span class="item-secondary-title" >Title For Links</span></li>        <li><a href="#">These Links Still Appear</a></li>        <li><a href="#">Just Like The Others</a></li>        <li><a href="#">Even When Under A Title</a></li>        <li><span class="divider divider-horiz" ></span></li>        <li><span class="item-secondary-title" >Title After Divider</span></li>        <li><a href="#">Once Again...</a></li>        <li><a href="#">These Links Still Appear</a></li>        <li><a href="#">Just Like The Others</a></li>        <li><a href="#">Even When Under A Title</a></li>      </ul>    </li>    <li><span class="divider divider-vert" ></span></li>    <li><a class="item-primary" href="#;">Fully Flexible</a>      <ul style="width:150px;">        <li><span class="item-secondary-title" >Title For Links</span></li>        <li><a href="#">These Links Still Appear</a></li>        <li><a href="#">Just Like The Others</a></li>        <li><a href="#">Even When Under A Title</a></li>        <li><span class="divider divider-horiz" ></span></li>        <li><span class="item-secondary-title" >Title After Divider</span></li>        <li><a href="#">Once Again...</a></li>        <li><a href="#">These Links Still Appear</a></li>        <li><a href="#">Just Like The Others</a></li>        <li><a href="#">Even When Under A Title</a></li>      </ul>    </li>    <li class="clear">&nbsp;</li>  </ul>
</div>

Demikianlah cara membuat Menu Dropdown yang fantastic pada blogger.