Menu flotante: Flowers & Love

Vista previa~

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