27/11/12

Tutorial Menu Circular

Hola a todos!! hoy otra vez he estado un poco aburrida asi que me puse a escuchar musica xD 
mientras lo hacia recorde que no habia hecho ninguna entrada aqui en el blogui asi que
 por eso les quize traer un lindo tutorial  


 aqui les dejo una imagen de lo que haremos
 

 Empezemos... 1° Panel de Control →Modificar Plantilla→ Html 
 2° Ctrl + F o F3 para buscar ]]> 
3° y antes del ]]> pega el siguiente codigo

#left {
bottom:10px;left:10px;position: fixed;float: left;}
#nav {
margin-top:40px;
float: left;
}
#nav a {
background-color:pink;color:#fff;display: block;width: 40px;height: 40px;border-radius: 35px;-webkit-border-radius: 35px;
-moz-border-radius: 35px;
padding:6px;
font-family:arial;font-size: 8px;line-height:36px;text-decoration: none;
text-align: center;
margin-bottom: 6px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#nav a:hover {
background-color:pink;color: #fff;-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-webkit-transition:1300ms;}
</style>
<div id="left">
<div id="nav">
<a href="部落格Link">名稱</a>
<a href=" 部落格Link "> 名稱 </a>
<a href=" 部落格Link "> 名稱 </a>
<a href=" 部落格Link "> 名稱 </a>
</div></div>


 Cian: alli pueden poner el color que quieran,ahora si quieren una imagen tienen que cambiar todo lo que esta en cian por esto background:url(link Url);


eso seria todo,si tienen alguna duda pueden preguntar bye!

No hay comentarios:

Publicar un comentario