Menú TOP

Hey babies! ¿Y si os digo que el otro día hice mi primer pedido a Aliexpress? Realmente se encuentran cosas muchísimo más baratas pero... ¿valdrá la pena? Tenía ganas de pedirme un par de carcasas para el móvil, así que ya veremos, además el otro día me saltó un reels en Instagram de una especie de soporte para poner un disco (un CD) y un par de photocards que me generó una necesidad que no tenía 😂 así que ya os contaré si valió o no la pena 🤗.

En otro orden de cosas... últimamente no se qué subir al blog, por una parte me está dando pereza ponerme a buscar información sobre curiosidades/misterios... igual el calor que está haciendo tenga algo que ver 😅 y por otra... si subo muchos tutoriales seguidos, ¿no se volverá aburrido? 🤔 ¿queréis que suba algo en específico? porque sabéis que me encanta hacerlos, me parece entretenido.

Y hoy, como no sabía qué subir, traigo el tutorial de un menú superior que se ve bastante bonito :3

preview

Lo primero es ir a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y justo encima colocamos el siguiente código:

#top{
background-color:#fff;
border-bottom: solid 2px #c7d1dd;
width:100%;
height:70px;
left:0%;
top:0px;
position:fixed;
z-index:900;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#toplinks{
position:absolute;
z-index:1000;
letter-spacing:0.5px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}

#toplinks em{
position:relative;
top:17px;
left:90px;
right:100px;
bottom:0px;
color:#c1c9d2;
letter-spacing: -1px;
text-transform:none;
font-family:calibri;
font-weight:300;
font-size:25px;
}

#toplinks a {
background-color:#e6eaee;
padding:2px 4px 2px 4px;
position:relative;
top:15px;
left:120px;
margin:2px;
font-size:12px;
font-family:calibri;
color:#c1c9d2;
text-shadow:#fff 1px 1px 1px;
text-transform:uppercase;
text-decoration:none;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
} 

#toplinks a:hover{
background-color:#cfd8e4;
padding:30px 4px 27px 4px;
color:#fff;
text-shadow:#afb8c2 1px 1px 1px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}

#icon img{
width:50px;
height:50px;
position:fixed;
margin-top:5px;
margin-left:20px;
padding:4px;
background:#fff;
border:1px solid #c1c9d2;
border-radius:100%;
opacity:1;
z-index:99999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#icon img:hover{
background:#e6eaee;
border:1px solid #c1c9d2;
opacity:0.8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-animation: toolvertical 1s;
}

@-webkit-keyframes toolvertical {
0% {-webkit-transform: rotatex(0deg);}
100% {-webkit-transform: rotatex(360deg);}
}

input, textarea, option, select, button form{
background:#fff;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
border-left: solid 1px #fff;
border-right: solid 1px #d6dde6;
padding:2px;
color:#cfd6df;
font-size:12px;
font-family:calibri;
color:#c1c9d2;
text-shadow:#fff 1px 1px 1px;
text-transform:uppercase;
text-decoration:none;
font-weight: 300;
line-height:20px;
height: 20px;
width:160px;
float: right;
margin-right:-550px;
margin-top:-8px;
transition:all 0.7248s ease-in-out;
-webkit-transition:all 0.7248s ease-in-out;
-moz-transition:all 0.7248s ease-in-out;
-o-transition:all 0.7248s ease-in-out;
cursor: pointer;
}

input:focus{outline:none;}

*::-moz-selection {
background:#cfd6df;
color: #fff;
text-shadow: 0 1px 0 #ffffff;
}

Como siempre, todo lo que está en negrita se puede personalizar.

Ahora agregamos un gadget HTML/Javascript con el siguiente código:

<div id="TOP">
<div id="ICON">
<img src="LINK ICONO" /></div>
<div id="TOPLINKS"><strong><em>TÍTULO DEL BLOG</em></strong>
<a href="LINK" title="LINK">LINK</a>
<a href="LINK" title="LINK">LINK</a>
<a href="LINK" title="LINK">LINK</a>
</div></div>

Y de nuevo, todo lo que está en negrita se debe modificar o añadir más :)