[Tutoriales] Menú superior flotante

Holiii!!! Hoy os traigo un tutorial para poner un menú flotante arriba del blog, como el de la foto de arriba (aunque está un poco deformada, sorry, pulsen en la imagen para verlo más grande). Este tutorial lo he visto en otros blogs, pero en esas veces, siempre que lo veo que lo hacen, el menú pasa por detrás de las entradas y los gadgets, y bueno, yo he hecho mi versión, que pasa por encima, y con botones para las redes sociales ^^ Me ha costado un montón ya que me he puesto a probar y a probar y a probar con el "inspeccionar elemento", y al final me ha salido.

Aunque aviso que es un menu simple sin subpestañas, ya que aun no he aprendido ha ponerlas bien, siempre me falla algo xD (;-;), aunque le añadí un botón de follow, que tiene los mismos códigos que los demás, solo que con otro html.



Primero, vamos a Plantilla>Editar HTML y buscamos ]]></b:skin> Y justo debajo, pegamos el siguiente código:

.menuflotante{
position: relative;
z-index: 99;
margin-top: 50px;
width: 100%;
}
ul.menuflotando{
list-style: none;
padding: 8px 1px;
font-weight: 200;
font-size: 14px;
letter-spacing: 0.01em;
color: #fff;
line-height: 15px;
position: fixed;
background: #D6F5F0; /*Fondo, si quieres poner una imagen, solo añade url('urldelaimagen') center repeat(el repeat es solo si es un patron o algo)*/
border-bottom: 6px ridge #3DB69F; /*Borde*/
box-shadow: 0 3px 10px #3C3B3B; /*Sombra*/
width: 100%;
top: 0;
left: 0;margin-top:0px;
}
ul.menuflotando li {
float: left;
margin-left: 5px;
margin-right: 5px;
margin-top:8px;
margin-bottom:8px;
position: relative;
}
ul.menuflotando li.cute{
background: #4CD3BA; /*Fondo de los botones*/
}
ul.menuflotando li a, ul.menuflotando li a:link {
color: #FFF; /*Letra de los botones*/
text-decoration: none;
display: block;
padding: 4px 20px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
ul.menuflotando li a:hover {
color: #fafafa; /*letra de los botones al pasar el cursor*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #206255; /*Fondo al pasar el cursor*/
text-shadow: 1px 1px 1px #222;
}

Eso es para el menu, y para añadir las redes sociales, tienen que añadir los siguientes códigos. Yo solo lo he puesto de facebook, twitter, instagram y google+, pero si quieren añadir más, copian uno de los códigos, le cambian el nombre, el color y la imagen, y listo:

.twittercute {
background: #92D1F0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMI5HVb1xI4xBlwbWCP_S5aSPlbGAcRVLTGBiRyPZdsUDpN99v_46Nu_CmpwdceGZUsCKzYDVpKgZMYypyx-ZQWSHm48xLmI1GUrBaJSfAZhg6Cu-VbwvkXnFsfdjaroNpvIsW3WqpbhKe/s0/white_twitter_bird.png") no-repeat center center; /*Fondo*/
font-size: 13px;
width: 0px;
float: right;
padding: 5px 7px 4px 30px;
margin-top: 5px;
margin-right: 10px;
z-index: 9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius: 50%;
height: 26px;
}
.facebookcute {
background: #424894 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhic_g3wgg6dcdDdD45r5UwIx9soh1CFBgu-QmuNoR0Ax-9RbIs6u-e0CvfGDK67nKo5SkYujtT0y1pJyUJRM14WfU37K9nwF8jlL7JtC8R66MkAyYzW9YRpRfGG9xr0Bgf6kS9k7GYThHN/s0/white_facebook.png") no-repeat center center;/*Fondo*/
font-size: 13px;
width: 0px;
margin-top: 5px;
float: right;
padding: 5px 7px 4px 30px;
z-index: 9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius: 50%;
height: 26px;
margin-right: 10px;
}
.instacute {
background: #E568ED url("http://fc01.deviantart.net/fs70/f/2015/024/3/1/instagram_white_logo_by_liminyade-d8f6879.png") no-repeat center center;/*Fondo*/
font-size: 13px;
background-size: 100%;
width: 0px;
padding: 5px 7px 4px 30px;
z-index: 9;
float: right;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius: 50%;
height: 26px;
margin-right: 10px;
top: 0;
margin-top: 5px;
}
.googlecute {
background: #DD3636 url("http://fc03.deviantart.net/fs71/f/2015/024/f/e/google___white_logo_by_liminyade-d8f683q.png") no-repeat center center;/*Fondo*/
font-size: 13px;
background-size: 85%;
width: 0px;
padding: 5px 7px 4px 30px;
z-index: 9;
float: right;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius: 50%;
height: 26px;
margin-right: 10px;
top: 0;
margin-top: 5px;
}
#redes:hover {
-webkit-transform:rotate(360deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Y ahora, haces un gadget HTML, y pegas el siguiente código, o lo pegas en la plantilla (es lo mejor), después de 

 </b:includable>
    </b:widget>
  </b:section>

Ya os digo yo que en la plantilla te da menos problemas.

<div class='menuflotante'>
<ul class='menuflotando'>
<li class='cute'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li class='cute'><a href='URL'>Title</a></li>
<li class='cute'><a href='URL'>Title</a></li>
<li class='cute'><a href='URL'>Title</a></li>
<li class='cute'><a href='URL'>Title</a></li>
<li class='cute' style='float:right;margin-right:20px;'><a href='http://www.blogger.com/follow-blog.g?blogID=3697057866363982775'>+Follow</a></li>
<a href='http://twitter.com/usuario'><div class='twittercute' id="redes"></div></a>
<a href='https://www.facebook.com/usuario'><div class='facebookcute' id="redes"></div></a>
<a href='https://instagram.com/usuario/'><div class='instacute' id="redes"></div></a>
<a href='https://plus.google.com/100226504412757439059'><div class='googlecute' id="redes"></div></a>
</ul>
</div>

Solo tienes que cambiar las URL y los títulos, menos el violeta, porque eso te pone directamente la página principal de tu blog, y editar lo que está en rojo, que es la ID del blog, que se consigue cuando estas editando el blog o haciendo una entrada, solo tienes que fijarte arriba, y verás el número, lo copias y ya.

Créditos a Amary Miau's Blog, por los códigos HTML de el botón de +Follow.

Beshus y hasta mañana!!