Cara Membuat Menu Dropdown Keren di Blogger

kevinservis TIPS BLOG 2 Apr 2013

cikevin Blog's | Saat Ini Saya Akan Berbagi Tentang Cara Membuat Menu Dropdown Keren di Blogger  , Cara ini Juga Masuk dalam Keyword  Cara Buat Menu Dropdown di Bawah Header Membuat Sebuah Menu Navigasi dengan Efek Dropdown Memang Sangat Perlu di Perlukan Oleh Seorang Blogger Karena Tanpa Menu Navigasi Dropdown Blog Akan Cepat ditinggalkan Oleh Seorang Pengunjung karena tidak efektif kecuali anda sudah Memasang Artikel Terkait Dengan Scroll ataupun Artikel Terkait Dengan Thumbnail . Tapi Beda Lagi Bagi Robot Google Karena Dengan Menu Navigasi Dropdown Seringkali Membuat Loading Blog Akan Menjadi Lama dan Ini Tidak Baik Bagi SEO blog. tapi jangan Khawatir Menu Navigasi Dropdown yang Keren ini Tidak Membuat Loading Blog Berat . Menu Dropdown ini Bukan Buatan Saya Melainkan Buatan Seorang Blogger Master .

Berikut Kelebihan Memakai Menu Dropdown ini :

1. Didesain dengan background dan warna menu yang sangat stailis
2. Didesain juga dengan gambar dan link
3. juga didesain dengan kotak berlangganan artikel lewat email
4. di Desain Dengan Menggunakan Breaking News atau Headlines News
5. Didesain dengan 2 dropdown, kiri dan kanan seperti pada gambar diatas.

Jika Kalian Ingin Melihat Seperti Apa Nantinya Menu Navigasi dengan Dropdown ini akan Terjadi 

Ayo Kita Langsung Ke Tutorial Cara Memasang Menu Dropdown Keren di Blogger ini 

Untuk Menghindari Hal yang Tidak di Inginkan BackUp Terlebih Dahulu Template Anda

1. Login Seperti Biasa ke Akun Blogger Anda.

2. Masuk Ke Menu Template Anda > Edit HTML > Centang Expand Template Widget

3.  Cari Kode dibawah untuk Memudahkan Tekan ctrl+f

]]></s:kin>

4. Jika Sudah Ketemu Masukkan Kode dibawah Tepat diatas Kode ]]></s:kin>

ul.dropmenu{
 position: relative;
 margin: 0px;
 padding: 1px 0px 0px 0px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbHOkCT7hAut-Rda0t6r2tBPdU2eWXb49fQu1F-7r1ZK4ddfrzLWwuyg3ZS_1XU6t3lWUwsMxnGm7-QRhbTlLDENCmKeRD9HfcjG8BiGTl9EjCEFxi_E9PKjYpZE2Di9MpHx33gxWoGo/s1600/navigation.png) repeat-x scroll 0 0;
 display:block;
 height: 35px;
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size: 12px;
}
.dropmenu li{
 position: relative;
 list-style: none;
 float: left;
 margin: 0px;
 padding: 0px;
}
.dropmenu li a{
 height: 22px;
 padding: 9px 30px 0px 15px;
 display: block;
 cursor: point;
 border-right: solid 1px #4a779d;
 color: #FFFFFF;
 text-transform: uppercase;
 text-decoration: none;
}
.dropmenu li span{
 display: block;
 float: right;
 height: 10px;
 width: 10px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWM41ZG6lcWfpehHfUqdfs_QFoXw2szT4e6giR1x2quqJjkoemTHh_1ZAEmFDJ7Gx_HFCtyDk3R1oxlQrSw8OB6cMwvXj9qm5wrh4l3_Jku4BiOnKackLRrrgUJlpNNfZKIUKcQfXfF20/s1600/arrow_up.png) repeat-x scroll 0 0;
 position: absolute;
 top: 12px;
 right: 10px;
}
.dropmenu li  a:hover span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiehqygiQ5XEJW6pt1mpmNZk94FCXny0t7Km94aA4kzLP4dD6vcVyiUur2RREgA8_0gnLySy8ueZICVDcrzohAHvzBtABL52hc7wW4QSQAS01Mulj7fxr9kVsCtHUgS23TnWe44rse6Hc/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
 display: block;
}
.dropmenu ul{
 position: absolute;
 display: none;
 width: 140px;
 padding: 0px;
 margin: 0px;
 border-bottom: 1px solid #ccc;
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIbP6bBqE5OBAzkIs8XYXZLH_pTD3c6CfV7V7BsApf0WS17lO77rzPGZwkI_-xVaF9qv_-yzgAag_WG8xa4FseSy3M0uQWpaBMIi3M7e_UQN7y8tGSKLugRmNRjZBo7QW2_eqElDPWwsw/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
 border: 0;
 float: none;
}
.dropmenu ul a {
  border: 1px solid #ccc;
  border-bottom: 0;
  white-space: nowrap;
  display:block;
  color: #0657AD;
  text-decoration: underline;
  text-transform: none;
}
a.selected, a:hover{
 color: #0657AD !important;
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIbP6bBqE5OBAzkIs8XYXZLH_pTD3c6CfV7V7BsApf0WS17lO77rzPGZwkI_-xVaF9qv_-yzgAag_WG8xa4FseSy3M0uQWpaBMIi3M7e_UQN7y8tGSKLugRmNRjZBo7QW2_eqElDPWwsw/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiehqygiQ5XEJW6pt1mpmNZk94FCXny0t7Km94aA4kzLP4dD6vcVyiUur2RREgA8_0gnLySy8ueZICVDcrzohAHvzBtABL52hc7wW4QSQAS01Mulj7fxr9kVsCtHUgS23TnWe44rse6Hc/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
 color:#F67A00 !important;
 text-decoration: none;
 background-color: #F0F0F0;
 background-image: none;
}
.dropmenu div ul{
 position: relative;
 display: block;
}
.dropmenu li div{
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIbP6bBqE5OBAzkIs8XYXZLH_pTD3c6CfV7V7BsApf0WS17lO77rzPGZwkI_-xVaF9qv_-yzgAag_WG8xa4FseSy3M0uQWpaBMIi3M7e_UQN7y8tGSKLugRmNRjZBo7QW2_eqElDPWwsw/s1600/gradient.png) repeat-x scroll 0 0;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
}
.dropmenu li div ul{
 border: none;
 background: none;
 position: relative !important;
}
.dropmenu li div a{
 border: none;
 border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
 display: block;
 position: relative;
 background: none;
 border: none;
}
.dropmenu li div div a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.dropmenu li div div a:hover{
 color: #000;
 text-decoration: none;
}
ul.left{
 float: left;
 width: 145px;
}
ul.right{
 float: right;
 width: 145px;
}
.small{
 color: #666;
 font-size: 10px;
 padding: 10px 5px 8px 5px !important;
 display: block;
 clear: both;
}
.products{
 width: 300px;
 padding: 15px !important;
}
.products ul{
 width: 100%;
}
.products ul li{
 border-bottom: 1px solid #ccc;
 height: 40px;
 padding: 10px 0px;
}
.products h2{
 font-size: 16px;
 padding: 2px 0px 3px 0px;
 margin: 0px;
}
.products p{
 color: #666;
 font-size: 10px;
 padding: 0px;
 margin: 0px;
}
.products img{
 float: left;
 padding-right: 10px;
}
.products  ul li a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.products  ul li  a:hover{
 color: #000 !important;
 text-decoration: none;
 background: none !important;
}
.tutorials{
 width: 300px;
}
input{
 border:1px solid #4A779D;
 padding: 3px 8px;
 margin-bottom: 8px;
 width: 164px;
}
label{
 padding: 0px 0px 4px 0px;
 display:block;
}
button{
 background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbHOkCT7hAut-Rda0t6r2tBPdU2eWXb49fQu1F-7r1ZK4ddfrzLWwuyg3ZS_1XU6t3lWUwsMxnGm7-QRhbTlLDENCmKeRD9HfcjG8BiGTl9EjCEFxi_E9PKjYpZE2Di9MpHx33gxWoGo/s1600/navigation.png) repeat-x scroll 0 0;
 color: #FFF;
 border:1px solid #4A779D;
 padding: 4px 10px;
 width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

5. Lalu Cari Lagi Kode dibawah ini

</head>

6. Setelah itu Copy Kode dibawah dan Taruh Tepat diatas kode </head>

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
 $("#nav-one").dropmenu();
});
</script>

7. Setelah itu Cari Kode yang Hampir Mirip Seperti Kode dibawah

<div id='header-wrapper'>
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bocah Poris Blog's (Header)' type='Header'/>
</b:section>
</div>

Keterangan : Jika Anda Kesulitan Mencari Kode diatas Cari saja koe <div id='header-wrapper'> atau <b:widget id='Header1

8. Jika Sudah Ketemu Masukkan Kode dibawah Taruh Tepat diatas Kode diatas.

<ul id="nav-one" class="dropmenu">
<li>
    <a href="#">Home</a> </li><li>
    <a href="#">Forum</a><ul>
        <li><a href="#">Support</a></li>
 <li><a href="#">Help</a></li>
 <li><a href="#">Examples</a></li>
 <li><a href="#">Your work</a></li>
</ul>
</li>
<li>
    <a href="#item3">Downloads</a><ul>
       <li><a href="#">Tools</a></li>
       <li><a href="#">Office</a></li>
       <li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
 <a href="#">Products</a>
 <div class="products">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPYAAWCMplWJ-Lbh3KTgRcvm1J-p3jf2NdJHeUsRbofen8-RpjyJbmLV7c_XLDxWPzQXHzl0ue7y-9hwqiyxxQn40uqf-F8a17f4FAAIHmTJDpOIPuuOxGFvU6IRbuBkfa2qBZukmpxh0/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-04SnxAy9_C5IIskyEO_VyQblfjl5VEJypbI8vIWJPKglkBTpcXe2fI6c5H3n-O5fY10qm_WzQ_mYVSFiG01Bnzg06-hXwMlhpdmUxiJF9ZYBsUe6X5YmbEYgivNDc3sVknIiN67D5M/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8P1Zqbv6Icqxj6IaeMyLkp-Nx0SACqWkPAiJmahznrXRciNdWVwcyKT788dM6xCpzqAARsGq8LGG0RCloyA55KOaEfA9-jRXUpgk0_RZ8woYM61fKa63886qCwohXwSJZIsvs07emy8/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8P1Zqbv6Icqxj6IaeMyLkp-Nx0SACqWkPAiJmahznrXRciNdWVwcyKT788dM6xCpzqAARsGq8LGG0RCloyA55KOaEfA9-jRXUpgk0_RZ8woYM61fKa63886qCwohXwSJZIsvs07emy8/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2z52Du-9Ab8Q8Tq0HHgWiQqtkcg0mI0zHKgxg0KyoI6TUcW2flLvwaQIbd8aAdBVMSS-ghg5b68yTX0Yuc8hv02wJ-9AYwFzDurOTimsNHd-0IXoFK7OhJFD9Zi2cplYbOeVuJNliw_M/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNSXiM3uToGy04firjTD7dLZykIp8m7wCyzgKtDhBhEWNmwTahFtHa3vqwz2sEZpusORKpcEkk2k5TXv0GF0b2VaxYKVPX_4Ky6_mupR8hzvBrsGzFG7sfWi0CBmfiYSnDXe6SJBfcrhY/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpTGnGK6oLrqEUCeStLx48zyjUS95T9ayJ7y-qU-ldJcZg6-9ebpNa1Sr8TNzY4GeHhOlJlRMjThfEpJTOdCxaNMK2wcvRzeVM-nSbGUBAMPN6jyt3WBO4KLfcazetKTk9ZgOqBfRbVnA/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li>
 <a href="#">Tutorials</a>
 <div class="tutorials">
 <ul class="left">
    <li><a href="#">Javascript</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">PHP</a></li>
</ul>
 <ul class="right">
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">ASP.NET</a></li>
    <li><a href="#">Actionscript</a></li>
</ul>
 
 <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li>
 <a href="#">Links</a> <ul>
    <li><a href="#">Programming</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">My websites</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Cool stuff</a></li>
    <li><a href="#">Sitebase</a></li>
    <li><a href="#">Other</a></li>
</ul>
</li>
<li> <a href="#">Subscribe Now</a>
 <div class="emailsub">
        <div class="emailupdatesform">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blog cikevin', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</li>    </ul> 

9. Ganti Kode yang Berwarna Sesuai Data Blog Anda Sendiri.
10. Terakhir Untuk Menghindari Klik Pratinjau jika Sudah Sukses . Klik Save/Simpan .

 .