cara mudah membuat menu dropdown horizontal di blogspot

cara membuat menu drop down pada blog. sebagian blogger pemula belum tahu bagaimana cara membuat menu dropdown di atas header blog untuk itu saya akan memberiakn tutorial membuat menu dropdown di blog. cara ini membutuhkan ketelitian karena kita akan mengedit html blog kalian jadi sebelum mengikuti tutorial ini sebaiknya kalian membackup dulu template blog kalian. buat kalian yang ingin melihat hasilnya bisa buka di davidsupriyatna.com kurang lebih hasilnya seperti itu.


inilah cara membuat menu dropdown di blog

1. login di blogger.com
2. klik menu template dan klik lagi edit html
3. beri tanda centang pada expand template widget
4. cari kode
 ]]></b:skin>

5. setelah menemukan kode tersebut pastekan kode di bawah ini tepat diatas kode tersebut

ul.dropmenu{
 position: relative;
 margin: 0px;
 padding: 1px 0px 0px 0px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZUMICgUMUAsjYOIQETI5wXfBDLwz3nZKLSuCGdlq3vo4UHcpu7Syqkr1jxweYGmHbVgY3xfe2JODOwbGIjZMwVTMtEvRYjuf-At3QRJ497IOXOm9cR2a8Fj_L1epmBwivqKR6T-xL414/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/AVvXsEhFNvA7pnr52kZGVeTkqH8m_f8dMvfijBMliyW2jYdpLCCgirnE7VBwhICT5_3Saw5yk_XNQVjxUM67mwexRkjDSuTDmaM4mJ3dUY6mve-F-osjF93_aBdiGGwmuGAxqhk89ovjPfKuwNg/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/AVvXsEguVpJOtOIel8MxqV3SgiYkHskh1BYwY2iKR3cAprl6qBqo2rCv2xHX7U83UXD0D8bWRLq1OApSimm-phZGKtbfP1EzOqhJGSJD5dfI6VtB_wDJkj7Mp-ejyLfeSgyXeP4LzgkgXkNosG8/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/AVvXsEhZxoA5MHl9YHiV_HBIKeBaDps4sS7Q9ePAvBbRC3vm1pYwi6GvOoyCsB1qB3InXNY4hRc4zMA8LIlcOwwzVeoKtM6YBAXgkn8Cwi_JcCxqTf1ejLZHCVrjTGdQenwlnwqRGrha_sBcVRI/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/AVvXsEhZxoA5MHl9YHiV_HBIKeBaDps4sS7Q9ePAvBbRC3vm1pYwi6GvOoyCsB1qB3InXNY4hRc4zMA8LIlcOwwzVeoKtM6YBAXgkn8Cwi_JcCxqTf1ejLZHCVrjTGdQenwlnwqRGrha_sBcVRI/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVpJOtOIel8MxqV3SgiYkHskh1BYwY2iKR3cAprl6qBqo2rCv2xHX7U83UXD0D8bWRLq1OApSimm-phZGKtbfP1EzOqhJGSJD5dfI6VtB_wDJkj7Mp-ejyLfeSgyXeP4LzgkgXkNosG8/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/AVvXsEhZxoA5MHl9YHiV_HBIKeBaDps4sS7Q9ePAvBbRC3vm1pYwi6GvOoyCsB1qB3InXNY4hRc4zMA8LIlcOwwzVeoKtM6YBAXgkn8Cwi_JcCxqTf1ejLZHCVrjTGdQenwlnwqRGrha_sBcVRI/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/AVvXsEiZUMICgUMUAsjYOIQETI5wXfBDLwz3nZKLSuCGdlq3vo4UHcpu7Syqkr1jxweYGmHbVgY3xfe2JODOwbGIjZMwVTMtEvRYjuf-At3QRJ497IOXOm9cR2a8Fj_L1epmBwivqKR6T-xL414/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;}

6. cari lagi kode dibawah ini
</head>

7. pastekan kode di bawah ini tepat diatas kode diatas

<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>

8. terakhir cari kode yang mirip mirip dengan kode di bawah ini

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

9. pastekan kode dibawah ini tepat diatas kode di atas

<ul id="nav-one" class="dropmenu">
<li>
    <a href="#">Home</a> </li><li>
    <a href="#">daftar isi</a><ul>
        <li><a href="#">about me</a></li>
 <li><a href="#">my g +</a></li>
 <li><a href="#">my twiter</a></li>
 <li><a href="#">my fb</a></li>
</ul>
</li>
<li>
    <a href="#item3">Downloads</a><ul>
       <li><a href="#">aplikasi</a></li>
       <li><a href="#">software</a></li>
       <li><a href="#">game</a></li> 
</ul>
</li>
<li>
 <a href="#">Tutorials</a>
 <div class="tutorials">
 <ul class="left">
    <li><a href="#">backlink</a></li>
    <li><a href="#">trik jitu</a></li>
    <li><a href="#">hacker</a></li>
</ul>
 <ul class="right">
    <li><a href="#">tutorial</a></li>
    <li><a href="#">seo</a></li>
    <li><a href="#">tips</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="#">lainnya</a> <ul>
    <li><a href="#">pengetahuan</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">social</a></li>
    <li><a href="#">public</a></li>
    <li><a href="#">privat</a></li>
   
</ul>
</li>
</ul> 

NB : buat yang berwarna kuning kalian bisa edit sesuka hati
kode # diganti dengan alamat blog
kode yang berwarna biru di ganti sesuai keinginan

itulah tutorial cara membuat menu dropdown di blog