An interesting CSS trick is the creation of "circles", by using CSS3.the border on each of the four corners of the element merge into a continuous round edge, creating the look of a circle. Using this nifty little trick, the following creates a series of circle menu links:
The CSS :
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save
Another process :
1.Add The CSS above </b:skin>
2. Paste THE CSS part
3.After <body> paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
.devmenu2{
width: 100%;
overflow:hidden;
}
.devmenu2 ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}
.devmenu2 li{
display: inline;
margin: 0;
}
.devmenu2 li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;/*change here for another menu color*/
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px; /*change here to create big/small round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.devmenu2 a span{
position:relative;
top:40%;
}
.devmenu2 li a:visited{
color: white;
}
.devmenu2 a:hover{
background: #a71b15;
}
How to Add this in Blogger ?<div class="devmenu2"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Category</span></a></li> <li><a href="#"><span>CSS</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </div>
It's very simple.
In a new HTML/JavaScript page element paste THE HTML code and click Save
Another process :
1.Add The CSS above </b:skin>
2. Paste THE CSS part
3.After <body> paste THE HTML part where you want the Menu Bar.
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
Post a Comment Blogger Facebook
Thank you..