Menú Ovalado horizontal

Hola , Bueno he venido con un tutorial sobre un menu ovalado y horizontal el cual utilizo en el diseño de mi blog Barbie Blog :

(haga clik para agrandar) y da en seguir leyendo o más información



Bueno lo primero que debemos de hacer es dirigirnos a Diseño , luego agragar un Gadget HTML/JavaScript y colocamos :

<style>

.tabs-MMC {

overflow: hidden;

position: relative;

width: 900px;

height: 50px;

background: #ff6aba; /* COLOR DE FONDO */

border-radius: 222px;

border: 1px dashed #ff2097; /* BORDE DEL MENU */

padding: 3px;

}

.tabs-MMC li {

display: inline-block;

padding: 15px;

width: 150px; /* ANCHO DE LOS LINKS */

border: 1px solid transparent;

font: normal 15px georgia;

text-transform: uppercase;

line-height: 8px;

}

.tabs-MMC li a {

color: #ff2097; /* COLOR DEL TEXTO */

text-decoration: none;

text-shadow: 0px 1px 0px #FFF, 0px -1px 0px #FFF, 1px 0px 0px #FFF, -1px 0px 0px #FFF;

}

.tabs-MMC li:first-child {

margin-top: 0px;

}

.tabs-MMC li:hover{

padding: 10px;

background: #ff6aba; /* COLOR DE FONDO {hover} */

border: 1px dashed #ffffff; /* BORDE DE LOS LINKS {hover} */

border-radius: 222px;

}

</style>

<center>

<ul class="tabs-MMC">

<li><a href="URL DE TU PAGINA"> NOMBRE DE TU PAGINA </a></li>

<li><a href="URL DE TU PAGINA"> NOMBRE DE TU PAGINA</a></li>

<li><a href="URL DE TU PAGINA"> NOMBRE DE TU PAGINA </a></li>

<li><a href="uRL DE TU PAGINA"> NOMBRE DE TU PAGINA</a></li>

<li><a href="URL de tu pagina"> Nombre de tu pagina </a></li>

</ul></center>

Creditos a Clasic & Love