Cara Membuat Dropdown Menu Dengan CSS3 Bergaya Klasik

Dropdown Menu adalah sebuah bar yang menampilkan menu (Halaman) yang dibuat untuk ditampilkan. dropdown ini sudah tersedia pada blogger, namun dropdown ini hanya berbentuk dropdown tunggal (tidak ada sub menu) atau widget laman.

Dropdown Menu ini adalah dropdown menu yang dibuat dengan kode css3 dan sebagai pelengkapnya menggunakan kode HTML, tentunya dengan memasang dropdown menu ini blog anda lebih menarik untuk dilihat.

Cara Untuk Memasang Dropdown Menu Dengan CSS3 Bergaya Klasik

---

• Silahkan Masuk Ke Akun Blogger Anda.
• Setelah itu, Klik menu Template, Simpan terlebih dahulu template yang anda gunakan, kemudian, klik tombol Edit HTML.
• Cari kode ]]></b:skin> dengan menekan CTRL+F, Lalu Masukan Kode CSS3 Berikut ini :

#YBB_klasik-menu {

     width:900px;

background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyjG4lxpBYtSsLMGBf9GxZ8k9vgU4um1ZsvQUkrTPHoVvAb4fJBrisOgzEzQub6W141wCTpMcMxmQ1AK9vSOJRIvnkfKWQQSzlNfpnuCbHJL-vdPN6Cs5BIl4EMsqfaXmqth-yQzu5s03s/s1600/ybb_klasik_menu_atas_bg.png) repeat-x scroll top;

color:#ddd;

height:35px;

-webkit-box-shadow:0 1px 5px #aaa;

-moz-box-shadow:0 1px 5px #aaa;

-ms-box-shadow:0 1px 5px #aaa;

-o-box-shadow:0 1px 5px #aaa;

box-shadow:0 1px 5px #aaa;

border-bottom:1px solid #000;

padding-top:8px;

border:none 5px #000000;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-top-left-radius:5px;

border-top-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

#YBB_klasik-menu ul,#YBB_klasik-menu li {

     margin:0 auto;

padding:0 0;

list-style:none;

}

#YBB_klasik-menu ul {

    height:35px;

width:980px;

}

#YBB_klasik-menu li {

     float:left;

display:inline;

position:relative;

font:14px;

text-transform:none;

}

#YBB_klasik-menu a {

     display:block;

line-height:35px;

padding:0 14px;

text-decoration:none;

color:#ddd;

}

#YBB_klasik-menu li a:hover {

     color:#fff;

}

#YBB_klasik-menu input {

     display:none;

margin:0 0;

padding:0 0;

width:80px;

height:30px;

opacity:0;

cursor:pointer;

}

#YBB_klasik-menu label {

     font:bold 30px Arial;

display:none;

width:35px;

height:36px;

line-height:36px;

text-align:center;

}

#YBB_klasik-menu label span {

     font-size:12px;

position:absolute;

left:35px;

}

#YBB_klasik-menu ul.menus {

     height:auto;

overflow:hidden;

width:180px;

background:#f1eeed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2H2hZsYi7N8zrU3lRxWu60sEQy66V5OC3EBylKubgDqUSOZYZGqxYfRcTRxkqZPB8U461Om5H3NulgGKC9uW-v3k5tCVZcqOwzyAE-JZALRWNnAysuD5MPrGmmJdj1pEX0O6R9eQ7KCh/s1600/submenu_bg.png);

position:absolute;

z-index:99;

display:none;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

#YBB_klasik-menu ul.menus li {

     display:block;

width:100%;

font:12px Arial;

text-transform:none;

text-shadow:none;

}

#YBB_klasik-menu ul.menus a {

     color:#333;

}

#YBB_klasik-menu li:hover ul.menus {

     display:block;

}

#YBB_klasik-menu a.submenu {

     padding:0 27px 0 14px;

}

#YBB_klasik-menu a.submenu::after {

     content:"";

width:0;

height:0;

border-width:6px 5px;

border-style:solid;

border-color:#ddd transparent transparent transparent;

position:absolute;

top:14px;

right:9px;

}

#YBB_klasik-menu ul.menus a:hover {

     background:#ddd;

color:#333;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

.page-YBB_klasik-menu {

     width:70%;

margin:18px auto;

padding:0;

float:right;

text-shadow:0 1px 0 rgba(0,0,0,0.7);

}

.page-YBB_klasik-menu ul {

     list-style:none;

color:#ddd;

width:700px;

margin:0 auto;

padding:0;

}

.page-YBB_klasik-menu ul li {

     list-style:none;

line-height:32px;

display:inline-block;

}

.page-YBB_klasik-menu li a{

     color:#ddd;

display:block;

font-size:14px;

font-family:Arial;

position:relative;

text-decoration:none;

text-transform:capitalize;

padding:0 10px;

}

.page-YBB_klasik-menu li a:hover,.page-YBB_klasik-menu .selected {

     color:#fff;

text-decoration:none;

background: rgba(0,0,0,.4);

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;

-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;

box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;

}

• Setelah itu, Klik Menu Tata Letak, --> Klik Add Gadget, --> Klik Widget HTML, Kemudian Masukan kode berikut ini, pada widget tersebut :

<div id="YBB_klasik-menu">

<ul>

<li><a href="/">Home</a></li>

<li><a class="submenu" href="#">Menu</a>

<ul class="menus">

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

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

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

</ul>

</li>

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

<li><a class="submenu" href="#">Menu 2</a>

<ul class="menus">

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

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

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

</ul>

</li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

Keterangan:

  1. Ganti Kode berwarna Merah dengan menu anda.

  2. Ganti Kode berwarna Kuning dengan submenu anda.

• Kemudian, Klik tombol Simpan.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG