Membuat Menu Bundar untuk website dan blog

Membuat Menu Bundar untuk website dan blog.membuat menu dan menu lagi,hehe, gpp lah untuk mengisi waktu luang daripada habis buat facebook.hehe.

siapa tahu aja ada yang menginginkan menu seperti ini, menu ini simpel banget namun unik dan masih sangat jarang orang yang menggunakan menu seperti ini.
berikut ini contoh atau demo menu nya:



seperti itulah menu yang akan kita buat.
selanjutnya langsung saja ke langkah2nya.
1.letakkan kode css berikut ini di atas </head> pada template anda.
<style type="text/css">

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

.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

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

.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

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

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

.circlemenu a:hover{
background: #a71b15;
}

</style>
2.Jika sudah, silahkan simpan template anda.
3.sekarang untuk membuat menunya cukup tambahkan kode berikut ini di tempat yang anda inginkan.
kode menu:
<div class="circlemenu">
<ul>
<li><a href="http://www.google.com/">

Home</a></li>
<li><a href="https://www.facebook.com/">

Facebook</a></li>
<li><a href="http://thizan.blogspot.com/">

CSS</a></li>
<li><a href="http://thizan.blogspot.com/">

Forums</a></li>
</ul>
</div>

ok..cukup sperti itu saja, memang gampangkan, jika ada kendala ,saran dan pendapatnya , silahkan komentar aja di bawah ini.
salam blogger indonsia.