CSS Circle Menu

http://www.webdesignshock.com/wp-content/uploads/2011/06/061-CSSbutton_thumb.jpg
Assalamu'alaikum ..
apa kabar sobat Blogger ? pasti baik aja kan ?
kali ini saya mau ngasih Tutorial Cara membuat CSS Circle Menu. Tau gk ? Pasti Tau donk, Bisa kalian bayangin kan ? menunya bentuknya Bulet gitu hehehe ..
Langsung Aja Deh ke tutorialnya Cekidot ..

1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Elemen Code ]]></b:skin>

4. Masukan CSS di bawah ini Di atas Elemen Code tadi

.menubunder{
width: 100%;
overflow:hidden;
}

.menubunder ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}

.menubunder li{
display: inline;
margin: 0;
}

.menubunder li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.menubunder a span{
position:relative;
top:40%;
}

.menubunder li a:visited{
color: white;
}

.menubunder a:hover{
background: #a71b15;
}
5. Simpan Template
6. Untuk memanggil CSS, Dibutuhkan HTML code, Masukan Code HTML Di bawah ini Untuk memanggil CSS Dimana aja, diwidget, dipostingan dll.

<div class="menubunder">
<ul>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loet</a></li>
</ul>
</div>
7. Finish. Silahkan lihat sendiri Hasilnya,


2 komentar:

[./Forbiden-403] mengatakan...

Sama sama sob .. :*
maaf sob, Jangan Spam lagi ya ..

[./Forbiden-403] mengatakan...

Udah di Folbek sob, maaf sob, Jangan Spam lagi ya .. :D

Posting Komentar