My Phone 085772791356

Wednesday 14 November 2012

Cara membuat Drop Down Menu lebih dari satu



Langsung saja pada inti nya .
  • Pertama Login ke akun BLOGGER anda .
  • Kemudian Klik Template or Layout
  • Pilih Edit HTML
  • Klik Lanjutkan
  • Centang Expand Template Widget
  • Cari     ]]></b:skin>       (biar cepat gunakan CTRL+F) 
  • Kemudian Copas SCRIPT di bawah tepat di atas nya :
  • Klik OK
/*----- MBT Drop Down Menu ----*/

    #mbtnavbar {

        background: #000000;

        width: 880px;

        color: #FFF;

            margin: 0px;

            padding: 0;

            position: relative;

            border-top:0px solid #000000;

            height:35px;

    }

    #mbtnav {

        margin: 0;

        padding: 0;

    }

    #mbtnav ul {

        float: left;

        list-style: none;

        margin: 0;

        padding: 0;

    }

    #mbtnav li {

        list-style: none;

        margin: 0;

        padding: 0;

            border-left:1px solid #DDD;

            border-right:1px solid #DDD;

            height:35px;

    }

    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {

        color: #000;

        display: block;

       font:normal 12px Helvetica, sans-serif;

       margin: 0;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

       

    }

    #mbtnav li a:hover, #mbtnav li a:active {

        background: #809FFE;

        color: #FFF;

        display: block;

        text-decoration: none;

            margin: 0;

        padding: 9px 12px 10px 12px;

       

   

       

    }

    #mbtnav li {

        float: left;

        padding: 0;

    }

    #mbtnav li ul {

        z-index: 9999;

        position: absolute;

        left: -999em;

        height: auto;

        width: 160px;

        margin: 0;

        padding: 0;

    }

    #mbtnav li ul a {

        width: 140px;

    }

    #mbtnav li ul ul {

        margin: -25px 0 0 161px;

    }

    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {

        left: -999em;

    }

    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

        left: auto;

    }

    #mbtnav li:hover, #mbtnav li.sfhover {

        position: static;

    }

    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {

        background: #809FFE;

        width: 120px;

        color: #000;

        display: block;

        font:normal 12px Helvetica, sans-serif;

        margin: 0;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

    z-index:9999;

    border-bottom:1px dotted #333;

   

    }

    #mbtnav li li a:hover, #mbtnavli li a:active {

        background: #2646A6;

        color: #FFF;

        display: block;

        margin: 0;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

    }


  • Langkah selanjutnya adalah masuk ke Tata Letak
  • Kemudian Klik Add Gadget
  • Pilih HTML/Java Script
  • Kemudian Copas Script di bawah ini
  • Klik OK


<div id="mbtnavbar">
<ul id="mbtnav">
<li>
              <a href="#">#</a>
            </li>
<li>
               <a href="#">#</a>

                <ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
<li>
               <a href="#">#</a>

                <ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
<li>
               <a href="#">#</a>

                <ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
<li>
               <a href="#">#</a>

                <ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
<li>
               <a href="#">#</a>

                <ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
</ul>
</div>


Catatan : Tanda Pager Merah ( # ) di isi dengan URL Link Anda
              Tanda Pager Hijau ( # ) di isi dengan Nama yang akan di tampilkan
              Tanda Pager Biru ( # ) di isi dengan Nama Menu Dropdown nya

Kalau masih belum mengerti mengenai mengisi URL anda bisa lihat contohnya di menu blog saya .


Jangan Lupa Juga untuk Follow Blog and Like My FP

No comments:

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Post a Comment

 
Nightmare Wings - Gaia Online