Cara Membuat Menu Dropdown Di Blog

Langsung saja simak baik baik di bawah ini caranya.

1. Login ke blogger.

2. Klik Template.

3. Klik tombol Edit HTML.

4. Cari kode ]]></b:skin>

5.  Masukkan Kode di bawah ini dan letakkan di atas kode ]]></b:skin>

#DropdownMenu {

    background:#ff6803;

border-radius:6px;

    width: 880px;

    height: 35px;

    font-size: 12px;

    font-family: Arial, Tahoma, Verdana;

    color:#FFFFFF;

    font-weight: bold;

    margin-bottom: 30px;

    padding: 2px;

}

#Dropdownbox {

    width: 875px;

border-radius:6px;

    float: left;

    margin: 0;

    padding: 0;

}

#strike {

border-radius:6px;

    margin: 0;

    padding: 0;

}

#strike ul {

border-radius:6px;

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;

}

#strike li {

border-radius:6px;

    list-style: none;

    margin: 0;

    padding: 0;

}

#strike li a, #strike li a:link, #strike li a:visited {

border-radius:6px;

    color:#FFFFFF;

    display: block;

    font-size: 16px;

    font-family: Georgia, Times New Roman;

    font-weight: normal;

    margin: 0;

    padding: 9px 15px 8px;

}

#strike li a:hover, #strike li a:active {

border-radius:6px;

    background:#FFFFFF;

    color:#ff6803;

    margin: 0;

    padding: 9px 15px 8px;

    text-decoration: none;

}

#strike li li a, #strike li li a:link, #strike li li a:visited {

border-radius:6px;

      background:#ff6803;

    width: 150px;

    color:#FFFFFF;

    font-size: 14px;

    font-family: Georgia, Times New Roman;

    font-weight: normal;

    float: none;

    margin: 0;

    padding: 7px 10px;

    border-bottom: 1px solid #FFF;

    border-left: 1px solid #FFF;

    border-right: 1px solid #FFF;

}

#strike li li a:hover, #strike li li a:active {

border-radius:6px;

     background:#FFFFFF;

    color:#ff6803;

    padding: 7px 10px;

}

#strike li {

border-radius:6px;

    float: left;

    padding: 0;

}

#strike li ul {

border-radius:6px;

    z-index: 9999;

    position: absolute;

    left: -999em;

    height: auto;

    width: 170px;

    margin: 0;

    padding: 0;

}

#strike li ul a {

border-radius:6px;

    width: 140px;

}

#strike li ul ul {

border-radius:6px;

    margin: -32px 0 0 171px;

}

#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {

border-radius:6px;

    left: -999em;

}

#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {

border-radius:6px;

    left: auto;

}

#strike li:hover, #strike li.sfhover {

border-radius:6px;

    position: static;

}

Keterangan :

Kode warna merah adalah kode warna menunya.silahkan anda ganti sesuai dengan kesukaan anda.

Kode warna biru adalah kode warna tulisan dalam menu.silahkan anda ganti sesuka anda.

6. Jika sudah selesai klik Simpan Template.

7. Setelah itu anda masuk ke menu Taat Letak.

8. Klik tambahkan Gadget

9. Pilih HTML/Java Script

10. Kosongkan judul dan masukkan kode di bawah ini pada konten

<div id="DropdownMenu">

<div id="Dropdownbox">

<ul id="strike">

<li><a href="#">Menu1</a></li>

<li>

<a href="#">Menu2</a>

<ul>

<li>

<a href="#">Sub Menu 2</a>

<ul>

<li><a href="#">Sub Sub Menu 2</a></li>

<li><a href="#">Sub Sub Menu 2</a></li>

<li><a href="#">Sub Sub Menu 2</a></li>

</ul>

</li>

<li><a href="#">Sub Menu 3</a></li>

<li><a href="#">Sub Menu 4</a></li>

<li><a href="#">Sub Menu 5</a></li>

<li><a href="#">Sub Menu 6</a></li>

</ul>

</li>

<li><a href="#">Menu 3</a></li>

<li><a href="#">Menu 4</a></li>

</ul>

</div>

</div>

Keterangan

Kode Warna merah : Ganti dengan judul menu anda contoh Menu

Kode warna Biru : Ganti dengan Link menu anda Contohnya " http://magezine123.blogspot.com/2014/09/cara-membuat-boxkotak-script-di-blog.html"

11. Klik tombol simpan

12. Selesai dan lihat hasilnya.

Share :

Facebook Twitter Google+