[Blogging] Cara Membuat Menu Drop Down Tanpa Edit HTML

Sangat mudah untuk membua menu drop down pada blogspot seperti di atas tanpa melakukan edit HTML, cukup dengan menambahkan gadget saja di bawah header blog. 

Caranya:

Buka Dasbor > Tata Letak> Tambah Gadget (dibawah header)

Kemudian masukkan kode berikut ini:

<style>
    #menunavigasihorisontal {
        background: #ff7474;
        width: 100%;
    
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:50px; }

    #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:normal 16px crushed, oswald;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #91857f;
        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: #EDEFF4;
        width: 120px;
        color: #e06666;
        display: block;
        font:normal 14px Arial, 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: #627AAD;
        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 14px 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: #e06666;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='http://www.tettytanoyo.com'>Home</a>
                </li>
                <li>
                  <a href='#'>About Me</a>
                </li>
                <li>
                  <a href='#'>This Blog</a>
                     <ul>
                        <li><a href='http://www.tettytanoyo.com/search/label/Tips'>Tips</a></li>
                        <li><a href='http://www.tettytanoyo.com/search/label/Blogging'>Blogging</a></li>
                        <li><a href='http://www.tettytanoyo.com/search/label/Diary'>Diary</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Other ▼</a>                 <ul> 
                    <li><a href='http://www.tettytanoyo.com/search/label/Giveaway'>Giveaway</a></li> 
                    <li><a href='http://www.kurikulumdanpembelajaran.blogspot.com'>Kurikulum</a></li> 
                    <li><a href='http://www.tettytanoyo.com/search/label/Puisi'>Puisi</a> 
                   <ul> 
                    <li><a href='#'>Sub Sub Menu 1</a></li> 
                    <li><a href='#'>Sub Sub Menu 2</a></li> 
                    <li><a href='#'>Sub Sub Menu 3</a></li> 
                  </ul> 
                  </li> 
                  </ul>             </li>
          </ul> 

        </div>

Kode yang saya beri warna adalah kode yang bisa diubah sesuai selera. Seperti font, warna, ukuran font, dan lainnya. (silakan diutak-atik sambil berkreasi)

Untuk mengetahui kode warna, biasanya saya melihat pada pengaturan di blogspot sendiri. 

Masuk ke dasbor>template>sesuaikan.

Selesai

Selamat Mencoba, Semoga Bermanfaat :)

Related Post:

Membuat Domain Blogspot Menjadi Dot.COM