Cara Membuat Menu Droupdown di blogger

kali ini saya akan mempostingkan tentang menu droupdown,
seperti yang terlihat pada gambar disamping.... menu ini sangat penting buat bloger, karena ini merupakan awal yang biasanya dilihat oleh para pengunjung bloger.....

ok jika kamu ter tarik simak tutorialnya dibawah ini:

- Pertama log in dulu ke blognya
- masuk ke dasbor
- trus opsi > tata letak > tambah Gadget > pilih Html/Java Scrip
- copy pastekan kode dibawah ini

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
<li>
            <a href="#">LINK1</a>
        </li>
<li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
<li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
<li>
            <a href="#">Link4</a>
        </li>
<li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
</ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
<li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
<li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
<li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
</ul>
</li>
<li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
<li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
</ul>
</li>
<li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
<li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
<li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
<li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
<li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
<li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
<li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
</ul>
</li>
<li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
<li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
<li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
<li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
<li>
                        <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
<li>
                        <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
<li>
                        <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
</ul>
</li>
</ul>
</li>
<li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
<li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
<li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
<li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
<li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul>

- selanjutnya di save dan lihat hasilnya....

semoga bermanfaat

jgan lupa tinggalkan comentar anda

yang copas sertakan sumber :)

1 comment:

AnonymousSeptember 19, 2014 at 9:42 PM
mas, saya mau tanya bagaimana cara membuat link web seperti punya anda.

terima kasih.

**** HARAP KOMENTAR DENGAN BAHASA INDONESIA YANG BAKU TANPA SINGKATAN.
*** Jangan berkomentar SPAM (promosi, dll,)
*** Jangan komentar yang berisi link aktif, jika ingin komentar anda di respon
*** Jangan berkomentar yang tidak relevan dan berkualitas rendah
*** Menggunakan Name/URL agar mudah untuk blogwalking