Menu: Lost Memory

2 de abril de 2014



Para colocar este menu en tu bloggie solamente debes ir a Diseño | Añadir gadget | HTML/JavaScript y pegar el siguiente código (para plantillas blogskins debes colocarlo debajo de </style> )

<style>
.rainbow {
  position: fixed;
  width: 80px;
  position:fixed;
  left: 200px;    top: 50px; }
/* Cajitas */
.cubito a{
  width: 48px; /* ancho de la caja */
  padding-top: 18px;
  padding-bottom: 18px;
  background: #ECF3F0; /* color de la caja */
  border: 2px solid #FAF8F3; /*  borde de la caja */
  font-family: arial;  /* fuente del texto */
  font-size: 11px; /* tamaño del texto */
  color: #222; /* color del texto */
  text-shadow: 1px 1px 1px #bbb; /* sombra del texto */
  text-decoration:none;
  text-align: center;
  display: inline-block;
  transition: .2s;
  margin:4px; /* separación entre las cajas */
}
/* Cajitas Hover */
.cubito a:hover{
  color:#666; /* color del texto*/
  width: 60px; /* ancho de la caja */
  text-decoration:none;
  text-shadow: none;
  transition: .2s;
  -webkit-animation: shadow 5s infinite; /* efecto de la sombra */
}
/* Gracias a thecircus-x.blogspot.com */
@-webkit-keyframes shadow {
0%   {box-shadow: inset 0px 0px 2px 2px #D6E5DF;}
25% {box-shadow: inset 0px 0px 4px 4px #D6E5DF;}
50% {box-shadow: inset 0px 0px 6px 6px #D6E5DF;}
75% {box-shadow: inset 0px 0px 4px 4px #D6E5DF;}
100% {box-shadow: inset 0px 0px 2px 2px #D6E5DF;}
}
</style>
<center>
<div class='rainbow'>
<div class='cubito'>
<a href="url">Home</a><br/>
<a href="url">About</a><br/>
<a href="url">Site</a><br/>
<a href='url'>Links</a><br/>
</div>
</div>
</center>

Ahora lo editas a gusto y ya está ..