Cara Membuat Menu Horizontal Dropdown di Blogspot

Caranya Cukup Mudah Yaitu :

1. Masuk dulu ke akun blogger anda

2. Setelah berada di Dashboard Klik Design --> Edit HTML

3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget

4. Cari Kode ]]></b:skin> 

5. Copy-Paste Kode CSS dibawah tepat Di Atas ]]></b:skin> 

 #subnavbar {
                background: #ffffff;
                width: auto;
                height: 26px;
                color: #FFF;
                margin: 0;
                padding: 0;
    }
    #subnav {
                margin: 0;
                padding: 0;
    }
    #subnav ul {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li {
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited {
                color: #000000;
                display: block;
                font-size: 11px;
                font-weight: bold;
                text-transform: uppercase;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li a:hover, #subnav li a:active {
                background: #888;
                color: #FFF;
                display: block;
                text-decoration: none;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
                background: #666;
                width: 140px;
                float: none;
                margin: 0;
                padding: 6px 10px;
                border-bottom: 1px solid #FFF;
                border-left: 1px solid #FFF;
                border-right: 1px solid #FFF;
    }
    #subnav li li a:hover, #subnav li li a:active {
                background: #888;
                margin: 0;
                padding: 6px 10px;
    }
    #subnav li {
                float: left;
                padding: 0;
    }
    #subnav li ul {
                z-index: 9999;
                position: absolute;
                left: -999em;
                height: auto;
                width: 160px;
                margin: 0;
                padding: 0;
    }
    #subnav li ul a {
                width: 140px;
    }
    #subnav li ul ul {
                margin: -25px 0 0 161px;
    }
    #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
                left: -999em;
    }
    #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
                left: auto;
    }
    #subnav li:hover, #subnav li.sfhover {
                position: static;
    }

6. Setelah Itu Cari Kode <b:widget id='Header1' locked='true'

Contoh :

<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
</b:section>

 

7. Copy-Paste Kode HTML yang tersedia dibawah ini tepat di bawah kode </b:section> jika ingin menempatkan Di Bawah Header, Jika ingin menempatkan di atas header paste kode di bawah ini tepat Di Atas kode <b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>

 

<div id='subnavbar'>
          <ul id='subnav'>
    <span style='font-weight: bold; text-shadow: 3px 3px 3px rgb(204, 204, 204);'><li>
    <a href='#'>Home</a>
    <ul>
    <li>
    <a href='#'>HomePage</a>
    </li>           
    </ul>
    </li>
<li>
    <a href='#'>Download Movie</a>
    </li>
     <li>
    <a href='#'>Download Mp3</a>
    <ul>
    <li>
    <a href='#'>Lagu Indo.</a>
    </li>
    <li>
    <a href='#'>Religi</a>
    </li>
    <li>
    <a href='#'>Western</a>
    </li>
</ul></li>

<li>
<a href='#'>Download Software</a>
    <ul>
    <li>
    <a href='#'>Tools</a>
    </li>
    <li>
    <a href='#'>Security</a>
    </li>
    <li>
    <a href='#'>Multimedia n Desaign</a>
    </li>
<li>
    <a href='#'>Musik</a>
    </li>
<li>
    <a href='#'>Internet</a>
    </li>
<li>
    <a href='#'>Drivers</a>
    </li>
<li>
    <a href='#'>Utilities</a>
    </li>
</ul></li>

<li>
<a href='#'>Artikel n Tutorial</a>
    <ul>
    <li>
    <a href='#'>Tutorial</a>
    </li><ul>
    <li>
    <a href='#'>Blogspot</a>
    </li></ul>
    <li>
    <a href='#'>Artikel</a>
    </li>
   
<li>
    <a href='#'>Islami</a>
    </li><li>
    <a href='#'>NusantaraQ</a>
    </li><li>
    <a href='#'>Indo. News</a>
    </li></ul></li>

<li>
<a href='#'>Tv Online</a>
    <ul>
    <li>
    <a href='#'>Tv One</a>
    </li>
    <li>
    <a href='#'>Antv</a>
    </li>
    <li>
    <a href='#'>Tv Islam</a>
    </li>
<li>
    <a href='#'>Mivo.Tv</a>
    </li>
<li>
    <a href='#'>Indoweb.Tv</a>
    </li>

</ul></li>
<li>
    <a href='#'>PlayList</a>
    </li><li>
    <a href='http://www.rizkyariff.co.vu/2011/04/link-exchange.html'>Link Exchange</a>
    </li>

<li>
    <a href='http://www.rizkyariff.co.vu/2012/02/cara-membuat-menu-horizontal-dropdown.html'><b><blink>Menu</blink></b></a>
    </li></span></ul></div>

  Untuk Link Dan Titlenya Silahkan Di Edit Sendiri :D




Ganti Tanda # ( Biru ) Dengan Link Anda Sendiri

Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Mudah2n Apa Yang Saya Bagikan Bisa Bermanfaat Buat Sahabat
Terima Kasih.