[Blogging] Cara Membuat Menu Drop Down Tanpa Edit HTML

| On
April 08, 2015




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


31 comments on "[Blogging] Cara Membuat Menu Drop Down Tanpa Edit HTML"
  1. nice info...pengen nyoba...

    ReplyDelete
    Replies
    1. Terima kasih sudah mampir kesini :)

      Delete
  2. wow kodenya banyak juga ya mak hehe

    ReplyDelete
  3. Semuanya di copy ya mak..? Nyobain ah..
    Makasih sharingnya ya mak..

    ReplyDelete
  4. Iya, nanti tinggal diganti aja warna, font, dll sesuai selera :)

    ReplyDelete
  5. Wihihiiii, blognya makin cantik nih :D

    ReplyDelete
    Replies
    1. tidak lebih cantik dari mak Mimi :)

      Delete
  6. dan saya baru tahu kalau itu namanya drop drop down hehe..makasih mak^^

    ReplyDelete
    Replies
    1. Saya juga tau dari buku sama googling :)

      Delete
  7. Makasih ilmunya mak, sudah saya praktekkan :D

    ReplyDelete
  8. Terimakasih ilmunya, mau nyoba aah

    ReplyDelete
  9. mak, ini beda sama laman ya

    ReplyDelete
    Replies
    1. kalo dari fungsi, menurut saya hampir sama mak, Cuman kalo drop down lebih dinamis aja gitu liatnya..

      Delete
  10. wah dapet ilmu baru nih, ntar malem dicoba ahh, makasih mak

    ReplyDelete
  11. Tapi untuk blogspot ya mba..Biasanya aku minta tolong ke web designerku kalo ada yg mau diganti ato tambah dari blog :D Tapi tulisan ini berguna nih kalo suatu saat aku mw beljar sendiri :)

    ReplyDelete
  12. Arigato kak buat infonya >/^\< udah sy coba, dan berhasil :"DD *tebarbunga*

    ReplyDelete
  13. bermanfaat bgt mbak hehe :D kunjungin balik ya

    ReplyDelete
  14. Makasih mas bro atas infonya

    ReplyDelete
  15. makasi banyak mbak, akhirnya saya nemu tutorial simple tapi tokcer.. :) salam kenal ya mbak

    ReplyDelete
  16. Kalau ingin nambah sub menu ke-2 dari sub menu bagaimana caranya? Terima kasih.

    ReplyDelete
  17. Mbak Tety... thanks ya. jadi semangat lg.

    ReplyDelete
  18. sub Sub menunya pada puisi kok ga muncul ya.....

    ReplyDelete
  19. Salam kenal dan persahabatan untuk semua dan khususnya admin diblog ini.

    ReplyDelete
  20. Mak mau tanya kok Daftar Isi ku malah balik ke Home x_x

    ReplyDelete
  21. bagus, bagus, bagus, tapi belum dicoba

    ReplyDelete
  22. thanks membantu sngat sis

    ReplyDelete
  23. BOOOOM!! succesful.
    visit back www.puteraseptiana.blogspot.com
    arigatou gozaimase

    ReplyDelete

Terima kasih telah berkunjung ke blog ini, silakan tinggalkan komentar yang baik dan positif ya :D