Poner menú dinámico circular que se expande al dar click sobre él - blog de Blogger

Hoy enseñaré como incorporar un elegante menú circular a nuestro BLOG con algunas cortas líneas de código, dicho menú tiene un efecto desplegable al dar click sobre él mostrandome distintas redes sociales y botones a los cuales direccionar.

Sí con la anterior imagen no fue suficiente pruébalo ahora mismo:

NOTA: Puse un fondo rosa ya que los iconos son blancos y lo más lógico es que se puedan ver, así que no es posible usarse en blogs con fondo blanco totalmente...

Continuando, si te ha gustado a continuación deberás seguir el siguiente tutorial (no va tener el fondo rosa como el ejemplo en la NOTA dice la razón de porqué la usé):

INSTALACIÓN DE MENÚ

1. Lo primero será saber que el menú podrá incorporarse en las entradas y en los gadgets en este casó será en los gadgets; así que, van a Blogger > Diseño > Añadir Gadget > HTML/JavaScript.

2. Luego allí mismo pegarán el siguiente código:

<center>
<nav class="circular-menu">

  <div class="circle">
<a class="fa fa-home fa-2x" href="URL INICIO"></a>
    <a class="fa fa-facebook fa-2x" href="URL FACEBOOK"></a>
    <a class="fa fa-twitter fa-2x" href="URL TWITTER"></a>
    <a class="fa fa-linkedin fa-2x" href="URL LINKEDIN"></a>
    <a class="fa fa-github fa-2x" href="URL GITHUB"></a>
    <a class="fa fa-rss fa-2x" href="URL RSS"></a>
    <a class="fa fa-pinterest fa-2x" href="URL PINTEREST"></a>
    <a class="fa fa-asterisk fa-2x" href="URL ASTERISK"></a>
  </div>
<a class="menu-button fa fa-bars fa-2x" href="#"></a>

</nav>
</center>
<style>
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";   /*Link desde donde toma los iconos usados*/

.circular-menu {
  width: 250px;      
  height: 250px;
  right: 0px;
  position: relative;
}

.circle {
  width: 250px;
  height: 250px;
  opacity: 0;
 
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -transform: scale(0);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open.circle {
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -transform: scale(1);
}

.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;

}

.circle a:hover {
  color: #eef;
}

.menu-button {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  text-decoration: none;
  text-align: center;
  color: #444;
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  padding: 10px;
  background: #dde;
}

.menu-button:hover {
  background-color: #eef;
}  </style>

<script> var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
 
  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
} </script> 

Muy bien, detallaré las cosas resaltadas por cada color: 

- Lo que se encuentra en color naranja es referente a la URL de lo debe ir cuando el lector de click sobre algún icono.

- Por otra parte, lo que está en color rojo es la URL que contiene los iconos que estamos usando ya que no son directamente imágenes y están citadas desde otro link.

- Por último, lo que está en azul es como están los iconos escritos en este código, pero, que es el mismo nombre que tendrán en el link de color rojo.

Así que, si desean cambiar un icono deberán abrir la URL roja y buscar los iconos "fa fa nombre icono" y reemplazarlo en este código por el que deseen que están en los azules.

Por hoy siendo todo, espero les guste si hay dudas pueden comentar, hasta la próxima...