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; /* color fondo */
border-bottom: solid 2px #c7d1dd; /* color borde */
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; /* color fuente */
letter-spacing: -1px;
text-transform:none;
font-family:calibri; /* fuente */
font-weight:300;
font-size:25px; /* tamaño fuente */
}

#toplinks a {
background-color:#e6eaee; /* color fondo */
padding:2px 4px 2px 4px;
position:relative;
top:15px;
left:120px;
margin:2px;
font-size:12px; /* tamaño fuente */
font-family:calibri; /* fuente */
color:#c1c9d2; /* color fuente */
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; /* color fondo */
padding:30px 4px 27px 4px;
color:#fff; /* color fuente */
text-shadow:#afb8c2 1px 1px 1px; /* sombra fuente */
-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; /* ancho foto */
height:50px; /* alto fuente */
position:fixed;
margin-top:5px;
margin-left:20px;
padding:4px;
background:#fff; /* color fondo */
border:1px solid #c1c9d2; /* color borde */
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; /* color fondo */
border:1px solid #c1c9d2; /* color borde */
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; /* color fondo */
border-top: solid 1px #fff; /* color borde superior */
border-bottom: solid 1px #fff; /* color borde inferior */
border-left: solid 1px #fff; /* color borde izquierdo */
border-right: solid 1px #d6dde6; /* color borde derecha */
padding:2px;
color:#cfd6df; /* color fuente */
font-size:12px; /* tamaño fuente */
font-family:calibri; /* fuente */
color:#c1c9d2; /* color */
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 fondo */
color: #fff; /* color */
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á señaladose debe modificar o añadir más :)