Tutorial - Round Menu With CSS3 (Menu Bulat)

Tutorial - Round Menu With CSS3 BY D RIANRound 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!

14 komentar:

Dhana/戴安娜 mengatakan...

salam sahabat
mas Rian saya masih melek merem soal CSS HEHEHE ternyata rada simple juga yach

Perpustakaan Antropologi mengatakan...

Kang... bagus tutorialnya... baru buat aku... makasih kang :)

Yayan mengatakan...

Nambah ilmu lagi nich, ditunggu postingan keren berikutnya

Sandy mengatakan...

Bagus mas !!

2012 mengatakan...

wahhh....
pengen....
mantab abizzz neeh tips nya..

Muhammad Chandra mengatakan...

Mantaap , ilmu baru bertmabah nih sob :)

D Rian mengatakan...

@2012 >> waduh perasaan ane baru komen di blog ente eh langsung dibalas wkwkwkw...

Rumah Imajinasi | Seminar Jakarta Indonesia 2011 mengatakan...

wah manteph and keren gan...

Beben mengatakan...

hehehe mantap...
CSS3.INFO <--- here

BeDa mengatakan...

Tutorial yang menarik.

Salam ukhuwah

profil steven william mengatakan...

ane gak mudeng sama sekali klo bahas html...

Rumah Imajinasi mengatakan...

wah manteph kawan,,
kpn2 gua coba,,

H'Rick mengatakan...

keren bro, kapan2 mampir lagi + di test

uchu mengatakan...

manteb nih Rian, ane Bookmark yh. belajar..

Posting Komentar