Dropdown menu 1

1. Pergi ke Blogger Dashboard >> Template >> Edit HTML
2. dan Carilah kode berikut di HTML Anda. 

]]></b:skin>

3. copy kode di bawah ini dan paste tepat di bawah kode yang anda cari tadi, yang ini lo
  ]]></b:skin>

#css3_menu {
        width: 960px;
        margin: 0px auto;
        border: 1px solid #333;
        border-top:none!important;
        background-color: #333;
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }

    #css3_menu, #css3_menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
   
   
    #css3_menu:before,
    #css3_menu:after {
        content: "";
        display: table;
    } 

#css3_menu:after {
        clear: both;
    }
   
   
    #css3_menu li {
        float: left;
        border-right: 1px solid #111;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
    }

#css3_menu a {
        float: left;
        padding: 15px 30px;
        color: #979797;
        letter-spacing: 4;
        text-transform:inherit;
        font-family: Verdana, Helvetica;
        font-size: 14px;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
    }
   
    #css3_menu li a:hover {
        background: #333;
    }

#css3_menu li:hover > a {
        color: #fafafa;
    }
   
    *html #css3_menu li a:hover { /* IE6 only */
        color: #fafafa;
    }

#css3_menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 47px;
        left: 0;
        z-index: 1;   
        background: #333;
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);   
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; 
    }

#css3_menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
   
    #css3_menu ul ul {
        top: 0;
        left: 174px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        -moz-box-shadow: -1px 0 0 rgba(210,210,210,.2);
        -webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2);
        box-shadow: -1px 0 0 rgba(210,210,210,.2);       
    }

  #css3_menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }

#css3_menu ul a {   
        padding: 12px;
        width: 150px;
        color: #979797;
        _height: 12px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
   
    #css3_menu ul a:hover {
        background-color:#3d3d3d;
        color: #fff;
       
    } 

4. kemudian simpan template.
5. Pergi ke Layout> Add Gadget dan pilih HTML / JavaScript gadget.  
6. Copy link HTML dan paste di dalam kotak konten.
7. Copy dan pastekan kode di bawah ini

<ul id="css3_menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blogger</a>
        <ul>
        <li><a href="#">Widgets</a></li>
        <li><a href="#">Plugin</a>
        <ul>
        <li> <a href="#">Facebook</a></li>
        <li> <a href="#">Twitter</a></li>
        <li> <a href="#">Pinterest</a></li>
        <li> <a href="#">Google Plus</a></li>
        <li> <a href="#">Adsense</a></li>
        <li> <a href="#">Custom</a>
        <ul>
        <li> <a href="#">Hello Bar</a></li>
        <li> <a href="#">Earning Boster</a></li>
        <li> <a href="#">Clock</a></li>
        </ul>
        </li>
        </ul>
        </li>
        <li><a href="#">Tips Tricks</a></li>
        <li><a href="#">Blogger News</a></li>
        <li><a href="#">Blogger Help</a></li>
        </ul>   
        </li>
        <li><a href="#">Template</a>
        <ul>
        <li><a href="#">Blogger</a>
        <ul>
        <li><a href="#">By Column</a>
        <ul>
        <li><a href="#">1 Column</a></li>
        <li><a href="#">2 Column</a></li>
        <li><a href="#">3 Column</a></li>
        </ul>
        </li>
        <li><a href="#">By Color</a>
        <ul>
        <li><a href="#">Red</a></li>
        <li><a href="#">Blue</a></li>
        <li><a href="#">Orange</a></li>
        </ul>
        </li>
        <li><a href="#">By Width</a></li>
        </ul>
        </li>
       
        <li><a href="#">WordPress</a></li>
        </ul>
        </li>
        <li><a href="#">Faqs</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

8. Tarik untuk memposisikan gadget di bawah header.
Klik Simpan dan lihat blog Anda. Anda akan melihat menu fungsional diinstal dan pastikan dropdown muncul.

9.Anda dapat menghapus atau menambah menu atau sub menu (sampai dengan multi level). Pastikan Anda menambahkan / menghapus kode yang relevan sepenuhnya yaitu mulai dari tag pembuka sampai tag penutup. Lakukan perubahan yang sangat hati-hati.