Membuat Menu Navbar Dropdown pada Blog Versi CSS3

Bagi yang merasa kurang puas dengan tampilan menu utama atau bisa dikatakan dengan navbar pada blog, kode ini bisa anda coba. Pada dasarnya memang agak membingungkan juga, tapi ternyata saya bisa juga. Hehe. Semua ini berkat website yang saya pelajari, www.3exploration.co.cc. Contohnya seperti di bawah ini:

Klik Untuk memperbesar
Bagaimana? Apakah anda suka?  Jika anda suka, langsung saja saya jelaskan.

1. Langsung masuk ke EDIT HTML anda,
2. Centang Expand Widget,
3. Gunakan Ctrl-F untuk menemukan kode ]]></b:skin>,
4. Jika sudah ketemu, copy paste kode di bawah ini di atas ]]></b:skin>:
/*----------------
    CSS3 DropDown Menu
    -------------------------------*/
    #navcss {
        margin: 0;
        padding: 7px 6px 0;
        background: #7d7d7d url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 -110px;
        line-height: 100%;

        border-radius: 2em;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;

        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    }
    #navcss li {
        margin: 0 5px;
        padding: 0 0 8px;
        float: left;
        position: relative;
        list-style: none;
    }


    /* main level link */
    #navcss a {
        font-weight: bold;
        color: #000;
        text-decoration: none;
        display: block;
        padding:  8px 20px;
        margin: 0;

        -webkit-border-radius: 1.6em;
        -moz-border-radius: 1.6em;
     
        text-shadow: 0 1px 1px rgba(0,0,0, .3);
    }
    #navcss a:hover {
        background: #000;
        color: #000;
    }

    /* main level link hover */
    #navcss .current a, #navcss li:hover > a {
        background: #666 url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 -40px;
        color: #000;
        border-top: solid 1px #f8f8f8;

        -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
        box-shadow: 0 1px 1px rgba(0,0,0, .2);

        text-shadow: 0 1px 0 rgba(255,255,255, 1);
    }

    /* sub levels link hover */
    #navcss ul li:hover a, #nav li:hover li a {
        background: none;
        border: none;
        color: #000;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    #navcss ul a:hover {
        background: #0078ff url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 -100px !important;
        color: #000 !important;

        -webkit-border-radius: 0;
        -moz-border-radius: 0;

        text-shadow: 0 1px 1px rgba(0,0,0, .1);
    }

    /* dropdown */
    #navcss li:hover > ul {
        display: block;
    }

    /* level 2 list */
    #navcss ul {
        display: none;

        margin: 0;
        padding: 0;
        width: 185px;
        position: absolute;
        top: 35px;
        left: 0;
        background: #ddd url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 0;
        border: solid 1px #b4b4b4;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;

        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
        box-shadow: 0 1px 3px rgba(0,0,0, .3);
    }
    #navcss ul li {
        float: none;
        margin: 0;
        padding: 0;
    }

    #navcss ul a {
        font-weight: normal;
        text-shadow: 0 1px 0 #fff;
    }

    /* level 3+ list */
    #navcss ul ul {
        left: 181px;
        top: -3px;
    }

    /* rounded corners of first and last link */
    #navcss ul li:first-child > a {
        -webkit-border-top-left-radius: 9px;
        -moz-border-radius-topleft: 9px;

        -webkit-border-top-right-radius: 9px;
        -moz-border-radius-topright: 9px;
    }
    #navcss ul li:last-child > a {
        -webkit-border-bottom-left-radius: 9px;
        -moz-border-radius-bottomleft: 9px;

        -webkit-border-bottom-right-radius: 9px;
        -moz-border-radius-bottomright: 9px;
    }

    /* clearfix */
    #navcss:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    #navcss {
        display: inline-block;
    }
5. Setelah selesai, SAVE template, lalu ke ELEMEN LAMAN,
6. Tambahkan gadget HTML/Javascript, lalu paste kode di bawah ini:
<ul id="navcss">
        <li class="current"><a href="Your URL Here">Your Title Here</a></li>
        <li><a href="Your URL Here">Your Tiltle Here</a>

            <ul>
                <li><a href="Your URL Here">Your Tiltle Here</a>
                    <ul>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>

                    </ul>
                </li>
                <li><a href="Your URL Here">Your Tiltle Here</a>
                    <ul>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                    </ul>
                </li>
                <li><a href="Your URL Here">Your Tiltle Here</a></li>

                <li><a href="Your URL Here">Your Tiltle Here</a></li>
            </ul>
        </li>
        <li><a href="Your URL Here">Your Tiltle Here</a>
            <ul>
                <li><a href="Your URL Here">Your Tiltle Here/a>
                    <ul>

                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                        <li><a href="Your URL Here">Your Tiltle Here</a>
                            <ul>
                                <li><a href="Your URL Here">Your Tiltle Here</a></li>
                                <li><a href="Your URL Here">Your Tiltle Here</a></li>
                                <li><a href="Your URL Here">Your Tiltle Here</a></li>

                            </ul>
                        </li>
                     
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                    </ul>
                </li>
                <li><a href="Your URL Here">Your Tiltle Here</a></li>
                <li><a href="Your URL Here">Your Tiltle Here</a></li>

                <li><a href="Your URL Here">Your Tiltle Here</a>
                    <ul>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                        <li><a href="Your URL Here">Your Tiltle Here</a></li>
                    </ul>
                </li>

            </ul>
        </li> 
        <li><a href="Your URL Here">Your Tiltle Here</a></li>
        <li><a href="Your URL Here">Your Tiltle Here</a></li>
    </ul> 

7. Yang berwarna MERAH anda ganti dengan URL yang anda tuju,
8. Yang berwarna BIRU anda ganti dengan nama halaman URL yang anda tuju.
9. Jika sudah disetting semuanya, save gadget lalu lihat hasilnya.


GOODLUCK

TERIMA KASIH SUDAH MEMBACA POSTING DI ATAS. JANGAN LUPA TINGGALIN JEJAK DI KOMENTAR YA? ^_^

Post a Comment

Mohon Untuk Tidak Mencantumkan Nama Anonim Anda. Terima Kasih.