Juvinao
1
Xi
Programador
Verificación en dos pasos activada
Suscripción a IA
Hola chicos betas, luego de un tiempo sin publicar vengo con un nuevo tutorial para Blogger, se trata de un esplendido menú con animación CSS para Blogger.
Solo debes agregar el siguiente código en un HTML/JavaScript:
Lo resaltado en negrita corresponde al HTML de los enlaces, añade tus datos y guarda los cambios.
Para más recursos para Blogger visita Mi Blog Ideas
Solo debes agregar el siguiente código en un HTML/JavaScript:
CSS:
<style>
#menu-soft {
width:100%;
padding:0;
color:#d9d9d9;
font-family: Century Gothic;
overflow:hidden;
background:#222;
}
#menu-soft ul {
width:940px;
margin:0auto;
}
#menu-soft a {
color:#d9d9d9;
font-weight:normal;
}
#menu-soft ul {
list-style:none;
display:block;
margin:0;
padding:0;
}
#menu-soft li {
float:left;
padding:10px;
display:block;
width:100px;
border-left:1px solid #2d2d2d;
/*Duración de transiciones*/
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
-o-transition:0.7s;
transition: 0.7s;
}
#menu-soft li:hover {
padding-left:50px;
cursor:pointer;
background:#1bb1bb;
}
#menu-soft li:hover a {
color:#fff;
text-shadow:1px 1px #222, 2px 2px #222; 3px 3px #222; 4px 4px #222;
}
#menu-soft li span {
font-size:24px;
}
</style>
<div id="menu-soft">
<ul>
[B]<li id="enlace-1"><a href="URL 1"><span>Enlace 1</span><br>Descripción 1</br></a></li>
<li id="enlace-2"><a href="URL 2"><span>Enlace 2</span><br>Descripción 2</br></a></li>
<li id="enlace-3"><a href="URL 3"><span>Enlace 3</span><br>Descripción 3</br></a></li>
<li id="enlace-4"><a href="URL 4"><span>Enlace 4</span><br>Descripción 4</br></a></li>
</ul>[/B]
</div>Lo resaltado en negrita corresponde al HTML de los enlaces, añade tus datos y guarda los cambios.
Para más recursos para Blogger visita Mi Blog Ideas
