Cara Membuat Menu Horizontal Dropdown di Blogspot ~ RezDown7

Home » Blogspot » Tutorial » » Cara Membuat Menu Horizontal Dropdown di Blogspot

Cara Membuat Menu Horizontal Dropdown di Blogspot

Selasa, 05 Juli 2011 - 8:54 PM | 62 Comments | Rezkiji | Edit Entri

Cara Membuat Menu Horizontal Dropdown di Blogspot --- Assalamualaikum, Kesempatan Kali Ini saya akan membagikan cara membuat/menambahkan Menu Horizontal Dropdown di blog kita. Fungsinya menurut saya adalah selain mempercantik blog, menu ini juga sebagai pelengkap blog kita dan sebagai fasilitas untuk mempermudah pengunjung menjelajahi blog kita. okey kita langsung saja lihat contohnya pada gambar di bawah atau lihat menu horizontal yang saya gunakan

Rzdown7|membuat menu hrozontal, menu dropdown blog, menu sedrhana, menu dibawah header blogspot, menu halaman|Cara Membuat Menu Horizontal Dropdown di Blogspot

Cara Membuat Menu Horizontal Dropdown di Blogspot sbb :

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='http://rezdown7.blogspot.com/'>Home</a>

<ul>

<li>

<a href='http://rezdown7.blogspot.com/p/kode-warna-html.html'>HomePage</a>

</li>

</ul>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Movie'>Download Movie</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/p/mp3.html'>Download Mp3</a>

<ul>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Lagu%20indo.'>Lagu Indo.</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Mp3%20Barat'>Religi</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Mp3%20Barat'>Western</a>

</li>

</ul></li>

<li>

<a href='http://rezdown7.blogspot.com/p/software.html'>Download Software</a>

<ul>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Tools%29'>Tools</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Security%29'>Security</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Multimedia%20n%20Design%29'>Multimedia n Desaign</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Musik%29'>Musik</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Intrenet%29'>Internet</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Drivers'>Drivers</a>

</li>

<li>

<a href='#'>Utilities</a>

</li>

</ul></li>

<li>

<a href='http://rezdown7.blogspot.com/p/terima-kasih-telah-berkunjung-pilihan.html'>Artikel n Tutorial</a>

<ul>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Tutorial'>Tutorial</a>

</li><ul>

<li>

<a href='http://rezdown7.blogspot.com/search/label/blogger'>Blogspot</a>

</li></ul>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Artikel'>Artikel</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/search/label/Islami'>Islami</a>

</li><li>

<a href='http://rezdown7.blogspot.com/search/label/NusantarQ'>NusantaraQ</a>

</li><li>

<a href='News|http://rezdown7.blogspot.com/search/label/News'>Indo. News</a>

</li></ul></li>

<li>

<a href='http://rezdown7.blogspot.com/p/tv-online_26.html'>Tv Online</a>

<ul>

<li>

<a href='http://rezdown7.blogspot.com/2007/07/tv-one.html'>Tv One</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/2007/07/antv.html'>Antv</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/2010/12/tv-islam.html'>Tv Islam</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/2007/07/live-tv.html'>Mivo.Tv</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/2007/07/indowebtv.html'>Indoweb.Tv</a>

</li>

</ul></li>

<li>

<a href='http://rezdown7.blogspot.com/p/buku-tamu.html'>PlayList</a>

</li><li>

<a href='http://rezdown7.blogspot.com/p/daftar-isi.html'>Daftar Isi</a>

</li>

<li>

<a href='http://rezdown7.blogspot.com/2011/01/tukaran-link-n-banner.html'><b>Link Exchange</b></a>

</li></span></ul></div>