Cara Membuat Menu Drop Down Keren di Blog

Menu dropdown akan sangat berguna bagi pengunjung blog yang ingin menemukan article menarik untuk di baca. Untuk pemilik blog sendiri menu d...

Menu dropdown akan sangat berguna bagi pengunjung blog yang ingin menemukan article menarik untuk di baca. Untuk pemilik blog sendiri menu dropdown sangat berguna bagiblogger yang memang isi articlenya beragam. Lihat gambar di bawah ini sebagai preview.

Langkah Pertama

Step 1 : Login ke accunt blogger sobat dan langsung menuju Blogger Dashboard>> Template>>Edit html

Step 2 : Gunakan Ctrl+F dan Temukan kode ]]></b:skin>. Lalu copy paste code di bawah ini tepat di atas kode ]]></b:skin>.

#mdb_menu
    {background: #656870;
        width: 100%;
        margin: 0px;
        height: 60px;
        padding: 0px;
        font-size: 13px;
        font-family: 'Trebuchet MS', sans-serif;
        font-weight: normal;
        word-spacing: 2;
        -webkit-font-smoothing: antialiased;
    }
    #mdb_menu li.home a {
        padding: 0px 30px;
    }
    #mdb_menu li.home img {
        vertical-align: middle;
    }
    #mdb_menu ul {
        height: 60px;
        list-style: none;
        margin: 0;
        padding: 0px;
    }
    #mdb_menu li {
        float: left;
        padding: 0px;
    }
    #mdb_menu li a {
        background: #656870;
        color: #CCC;
        display: block;
        font-weight: bold;
        line-height: 60px;
        margin: 0px;
        padding: 0px 25px;
        text-align: center;
        text-decoration: none;
        -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    #mdb_menu li a:hover, #mdb_menu ul li:hover a {
        background: #46484E;
        color: #FFFFFF;
        text-decoration: none;
        -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
        transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    #mdb_menu li ul {
        background: #656870;
        display: none;
        height: auto;
        padding: 0px;
        margin: 0px;
        border: 0px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        position: absolute;
        width: 225px;
        z-index: 200;
    /*top:1em;
    /*left:0;*/;
    }
    #mdb_menu li:hover ul {
        display: block;
    }
    #mdb_menu li li {
        display: block;
        float: none;
        margin: 0px;
        padding: 0px;
        width: 225px;
    }
    #mdb_menu li:hover li a {
        background: none;
        color: #979EAF;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    #mdb_menu li ul a {
        display: block;
        height: 60px;
        font-size: 13px;
        font-style: normal;
        margin: 0px;
        padding: 0px 10px 0px 15px;
        text-align: left;
    }
    #mdb_menu> ul > li ul li a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        -webkit-transition: color ease 0.3s;
        -moz-transition: color ease 0.3s;
        -ms-transition: color ease 0.3s;
        -o-transition: color ease 0.3s;
    }
    #mdb_menu li ul a:hover, #mdb_menu li ul li:hover a {
        background: #46484E;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #FFF;
        text-decoration: none;
        padding: 0px 10px 0px 15px;
    }

Langkah Kedua

Step 1 : Pilih rancangan atau tatak letak kemudian, Klik tambah gadget.

Step 2 : Pilih opsi HTML/Javascript.

Step 3 : Lalu copy-pastekan kode script di bawah ini.

<div id="MDB_menu">
    <ul>
        <li class="home">
            <a href="http://masdabang.blogspot.com/" title="Home Page"><img alt="Home" border="0" src="http://2.bp.blogspot.com/-kvHZVmX_alE/UcCCRzSl_0I/AAAAAAAACgY/dpBnq8DWu_w/s1600/Very- Basic-Home-icon.png"/></a>
        </li>
        <li class="sub ">
            <a href="#"><span>Blogger</span></a>
            <ul>
                <li>
                    <a href="#"><span>SEO</span></a>
                </li>
                <li>
                    <a href="#"><span>Template</span></a>
                </li>
                <li>
                    <a href="#"><span>Widgets</span></a>
                </li>
                <li>
                    <a href="#"><span>Plugins</span></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><span>Applicatoin</span></a>
            <ul>
                <li>
                    <a href="#"><span>HTML Encoder</span></a>
                </li>
                <li>
                    <a href="#"><span>HTML Editor</span></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><span>Tools &#187</span></a>
            <ul>
                <li>
                    <a href="#"><span>Online HTML Editor</span></a>
                </li>
                <li>
                    <a href="#"><span>Color Code</span></a>
                </li>
                <li>
                    <a href="#"><span>Page Rank Checker</span></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><span>Faqs</span></a>
        </li>
        <li>
            <a href="#"><span>About Us</span></a>
        </li>
        <li>
            <a href="#"><span>Contact Us</span></a>
        </li>
    </ul>
</div>

Silahkan ganti tanda # dengan URL yang sobat ingin publikaskan, terakir klik save dan selesai.Demikianlah tutorial sederhanan tentang Cara Membuat Menu Drop Down Keren di Blog.