CSS Circle Menu

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,

Lihat Demo Di Bawah Ini :

• Link Gue
• Link Gue
• Link Gue
• Link Gue
• Link Gue