Tutorial - Round Menu With CSS3 (Menu Bulat)

Round Menu (Menu Bulat) sengaja saya buat untuk pecinta CSS3 dan untuk yang suka ngotak-atik template. Pada Menu bulat ini kita menggunakan :

-Border-radius : Yang berfungsi untuk membulatkan menu.
-RGBA : Yang berfungsi sebagai background menu.
-RGB : Fungsinya sama dengan RGBA hanya saja RGB digunakan pada saat hover.

Berikut tutorialnya:
1. Masuk ke dasbor
2. Pilih Rancangan > Edit html
3. Copy+Paste kode dibawah ini sebelum ]]></b:skin>

.menu {
margin-right: 10px;
float: $startside;
position: relative;
top:3px;
left: 50px;
z-index: 80;
}

.menu ul li {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
width: 50px;
height: 35px;
overflow: hidden;
margin: 10px 0px;
padding: 5px 5px 18px;
padding-left: 15px;
margin-left: 15px;
padding-right: 15px;
margin-right: 15px;
float: left;
background: #7f9db9;
text-align: center;
padding-top: 29px;
}

.menu ul li a {
color: #fff;
text-decoration: none;
display:block;
}

.menu ul li.l1 {
background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
background: rgb(131,178,51);
}

.menu ul li.l2 {
background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
background: rgb(196,89,30);
}

.menu ul li.l3 {
background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
background: rgb(65,117,160);
}

4. Lalu Copy+Paste kode berikut pada bagian yang anda inginkan

<div class='menu'>
<ul>
<li class='l1'><a href='#'>CSS3</a></li>
<li class='l2'><a href='#'>is really</a></li>
<li class='l3'><a href='#'>powerful</a></li>
</ul>
</div>

5. Simpan Template

Semoga bermanfaat ya sobat blogger!