☰

Home About Blogger Memasang Drop Down Menu Horizontal Pada Blog

Memasang Drop Down Menu Horizontal Pada Blog

Unknown

Hallo para bloggernisti....hahahah...!!
Ada juga Milanisti sama Internisti, bukan bloggernisti.....!!
Kali ini saya akan memberikan kode HTML buat pasang Drop Down Menu Horizonta tanpa edit HTML, tinggal di "copas" saja di Widget. Tapi sebelum saya beri scriptnya, ada baiknya kalian lihat dulu screeenshootnya dibawah ini, takutnya entar menu drop downnya ga cocok sama keinginan agan-agan semua.

Gimana brow....??

Kalo berniat pasang di blog silahkan "copas" script dibawah ini ke Dasbor > Tata Letak > Add/Tambahkan Gadget > HTML/JavaScript.

<style>
    #menunavigasihorisontal {
        background: #7D2DD2;
        width: 100%;

        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #000000;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #FFFFFF;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #7D2DD2;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0 -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='http://kurniawan877.blogspot.com/search/label/About%20Blogger'>About Blogger</a>
                </li>
                <li>
                  <a href='#'>Komputer</a>
                <ul>
                        <li><a href='http://kurniawan877.blogspot.com/search/label/Computer%20Problem'>Masalah Komputer</a></li>
                        <li><a href='http://kurniawan877.blogspot.com/search/label/Software'>Software</a></li>
                        </ul>
                       </li>
                <li>
                  <a href='#'>Design Grafis</a>
                     <ul>
                        <li><a href='http://kurniawan877.blogspot.com/search/label/Adobe%20Photoshop'>Adobe Photoshop</a></li>
                        <li><a href='http://kurniawan877.blogspot.com/search/label/Corel%20Draw'>Corel Draw</a></li>
                        </ul>
                </li>
                <li>
                  <a href='#'>Game</a>
                     <ul>
                        <li><a href='http://kurniawan877.blogspot.com/search/label/Game%20Flash%20Online'>Game Flash Online</a></li>
                        <li><a href='http://kurniawan877.blogspot.com/search/label/Game%20PC%20Ringan'>Game PC Ringan</a></li>
                        <li><a href='http://kurniawan877.blogspot.com/search/label/Pro%20Evolution%20Soccer%202013'>Pro Evolution Soccer</a></li>
                       <li><a href='http://kurniawan877.blogspot.com/search/label/Zynga%20Poker'>Zynga Poker</a></li>
                     </ul>
                 </li>
                 <li>
                  <a href='http://kurniawan877.blogspot.com/search/label/Kode%20Warna'>Kode Warna</a>
                </li>
                <li>
                  <a href='#'>Lirik & Kunci Gitar</a>
<ul>
<li><a href='http://kurniawan877.blogspot.com/search/label/Lagu%20Barat'>Lagu Barat</a></li>
<li><a href='http://kurniawan877.blogspot.com/search/label/Lagu%20Dangdut'>Lagu Dangdut</a></li>
<li><a href='http://kurniawan877.blogspot.com/search/label/Lagu%20Indonesia'>Lagu Indonesia</a></li>
       </ul>
                 </li>

                <li>
                  <a href='http://kurniawan877.blogspot.com/search/label/Tips%20%26%20Trik'>Tips & Trik</a>
                </li>


          </ul>
        </div>

Keterangan Kode:
Kode ini sesuai dengan gambar diatas tadi.

#7D2DD2: warna background

Hijau: Link Tujuan

Merah: Judul Menu

Jika kalian ingin menambahkan lagi menunya, tinggal tambahkan saja kode berikut ini tepat dibelakang kode </li> dan diakhiri dengan kode </ul> </li> </div>.
Berikut ini saya berikan kode untuk menambahkan menu:

<li>
                  <a href='Link Menu'>Menu ▼ </a>
<ul>
<li><a href='Link Menu 1'>Menu 1</a></li>
<li><a href='Link Menu 2'>Menu 2</a></li>
<li><a href='Link Menu 3'>Menu 3</a></li>
       </ul>
                 </li>

NB: Perhatikan kode diatas, ada sedikit tambahan tanda segitiga warna pink dibelakang judul Menu, itu hanya variasi saja. Jika kalian tidak ingin memakainya tinggal dihapus saja tanda segitiganya. Tetapi jika kalian ingin memakai tanda segitiganya, jangan copy kodenya ke notepad, langsung saja copy dan paste ke HTML/JavaScript. Karena jika di copy dulu ke notepad tanda segitiganya tidak akan muncul.

Berikut ini adalah contoh menu yang sudah ditambahkan tanda segitiga:

CATATAN:

Jika kalian mengalami masalah dibelakang judul menu terdapat bulatan kecil hitam, sebenarnya itu tidak akan berpengaruh, tetapi memang bulatan itu sedikit membuat kurang menarik tampilannya. Itulah yang saya tidak ketahui penyebabnya.

Selamat Mencoba

&

GOOD LUCK

Related Post