Blogger | Blogspot CSS Circle Menu

CSS circle menu for blogger. the trick used to make circle is by setting very large radius, set to more than 50% of the height and width of the block.

Demo:

How to add to blogger:

step 1:

copy the HTML code and past it in HTML/Javascript widget and drag the widget to the place where you want the menu to be.
<div class="circlemenu"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>DHTML</span></a></li> <li><a href="#"><span>CSS</span></a></li> <li><a href="#"><span>Forums</span></a></li> </ul> </div>

step 2:

this is the css part of the menu this lets the menu to work properly if you are good at css you can movify color and other values of the code simply copy the code and past it inside the ]]></b:skin> or go to Design>Template Designer>advanced>add css. Past the code and click on Apply to Blog.
.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; }
Thanks to :

Comments