Menu flotante: Flowers & Love

30 de enero de 2014


Para tener este lindo menu en tu bloggie debes simplemente pegar el siguiente code arriba de </body> {para ambos tipos de plantilla} y editarlo a gusto {puse cartelitos para explicar que hace que}

<style>
#fresas { /* Posision en que se encuentra */
  position:fixed;
  left: 20px;
  top: 20px;
}
/* Estilo de las imágenes */
.choco {
  background: #FF8C94; /* Color de fondo */
  padding: 4px;  /* Lo que sobresale del fondo */
  border: 2px solid #FFD3B5; /* Tamaño del borde */
  border-radius: 100px; /* redondeado */
  margin-bottom: 30px; /* Separación entre la imagen de abajo */
  width: 65px; /* Tamaño de la imagen */
}
/* Efecto en las imágenes hover */
.choco:hover {
  -webkit-animation: rumble linear 2s infinite; /* Efecto de giro */
}
#canela { /* Estilo del texto */
  position: absolute;
  background: #fcc; /* color de fondo */
  letter-spacing: 1px; /* espacio entre las letras */
  border-radius: 5px;  /* redondeado */
  border: solid 2px #FFD3B5; /* borde */
  color: #666; /* color del texto */
  font-size: 6pt; /* tamaño de la fuente */
  margin-top:30px;
  margin-left:18px;
  font-family: PF Arma Five;
  text-shadow: -1px 0 #fff, 0 1px #fff,1px 0 #fff, 0 -1px #fff; /* sombra del texto */
  padding-left: 3px;
  padding-right: 3px;
  width: 30px; /* tamaño de la cajita del texto */
  opacity: 0;
  z-index: 1000;
  transtition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
 }
@font-face {font-family: PF Arma Five;src: url('http://static.tumblr.com/hhfgqo5/6Dlmfpt2j/pf_arma_five.ttf');}
.cont {
  display: inline-block;
  text-align: center;
}
.cont:hover #canela {
  transtition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  opacity: 1;}
/* Animacion de giro */
@-webkit-keyframes rumble {
  0% {-webkit-transform: rotate(360deg)}
  20% {-webkit-transform: rotate(0deg)}
  40% {-webkit-transform: rotate(0deg)}
  60% {-webkit-transform: rotate(120deg)}
  80% {-webkit-transform: rotate(0deg)}
  100% {-webkit-transform: rotate(360deg)}
}
</style>
<div id="fresas">
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div>
</div>


  • Para colocar el menu de forma horizontal deben borras los <br/> 
  • Para agregar otro boton deben colocar el código de abajo arriba del </div> que se encuentra en negrita

<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div>

Espero les sirva el tuto ^^ cuidado con no borrar el </div> solito del final porque armará desastre xD



13 comentarios:

  1. Que bello tutorial, me enamoré de el hahaha *-*

    ResponderEliminar
  2. waa angel~lo usare^3^
    *te dare creditos.
    saludos~

    ResponderEliminar
  3. Me encantaaa algún día lo pondré en mi blog ^^

    ResponderEliminar
  4. El hermoso!! *w* , estoy viendo muchos tutoriales por el momento haber que me decido por poner el blog *-*

    ResponderEliminar
  5. Lindisimo!!! Muchas gracias amiga por tan bello tuto, un saludito

    ResponderEliminar
  6. Está hermoso! *·* Me dan unas ganas de usarlo, con lo mono que se ve.

    ResponderEliminar
  7. Te quedo GENIAL el menuuu! Me gusto mucho <3
    Paso a decirte que sobre la idea que te comente por correo, se me complico responderte porque comencé con mis estudios, pero cuando este libre te explico mejor como voy a armarla *---*

    Saludos ~

    ResponderEliminar
    Respuestas
    1. Ni te imaginas como me la paso jugando con el menu xD me divierte mirarle girar ¬¬ xd .. Ah y no problem con eso.. yo también debería estar estudiando T.T esperaré la explicación ^^ cuídate~

      Eliminar
  8. me encantó pero me gustaria saber si se puede hacer este mismo menu pero ponerlo de forma horizontal y bueno que sean mas botones?

    ResponderEliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)