Para comenzar con esta nueva sección he decidido empezar con lo más básico, el gadget en el que tengo un poco de información a modo de introducción del blog.
Pero antes de empezar es importante saber donde tienes que colocar los códigos que dejaré a continuación. Para ello debes ir a "Diseño", que se encuentra en la columna de la izquierda cuando entras a modificar tu blog. Una vez ahí, si bajas al apartado de "sidebar" vas a tener dos o 3 columnas según el formato de tu página. Dependiendo de donde quieras colocar este gadget te vas a un "sidebar" o a otro y le das a "Añadir nuevo gadget".
Este al ser un código HTML vas a tener que darle a la opción de "HTML/JavaScript". Ahí podrás ponerle un título al gadget y podrás añadir el código que quieras.
ᴏᴊᴏ!¡ Siempre que quieras añadir un nuevo gadget tienes que repetir estos pasos.
Bien, ahora viene el paso "entretenido". Tendrás que copiar el código que te dejo a continuación sin omitir ningún espaciado ya que son importantes.
<div class="mensaje-hover" tabindex="0">
<span class="texto1"> ESCRIBE AQUÍ LO QUE QUIERAS EN LA PORTADA </span>
<span class="texto2">
ESCRIBE AQUÍ LA INFORMACIÓN QUE QUIERAS
</span>
<span class="estrella e1">✦</span>
<span class="estrella e2">✧</span>
<span class="estrella e3">★</span>
<span class="estrella e4">✦</span>
<span class="estrella e5">✧</span>
<span class="estrella e6">★</span>
<span class="estrella e7">✦</span>
<span class="estrella e8">✧</span>
</div>
<style>
.mensaje-hover{
width:00px;
height:00px;
border:2px solid #FFFFFF;
border-radius:15px;
background: linear-gradient(135deg, #FFFFFF 0%, #000000 50%, #FFFFFF 100%);
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:10px;
position:relative;
margin:auto;
font-family:'Yanone Kaffeesatz', sans-serif;
font-size:00px;
overflow:visible;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,.12);
transition:transform .2s ease;
}
.mensaje-hover:hover{
transform:translateY(-3px);
}
/* permite activar en móvil al tocar */
.mensaje-hover:focus-within{
transform:translateY(-3px);
}
/* estrellas */
.estrella{
position:absolute;
}
/* posiciones */
.e1{ top:-12px; left:18px; font-size:22px; color:#FFFFFF; }
.e2{ top:35px; left:-12px; font-size:13px; color:#FFFFFF; }
.e3{ top:-8px; right:22px; font-size:15px; color:#FFFFFF; }
.e4{ right:-12px; top:80px; font-size:22px; color:#FFFFFF; }
.e5{ bottom:35px; left:-10px; font-size:18px; color:#FFFFFF; }
.e6{ bottom:-12px; left:65px; font-size:12px; color:#FFFFFF; }
.e7{ bottom:15px; right:-10px; font-size:23px; color:#FFFFFF; }
.e8{ top:130px; right:25px; font-size:11px; color:#FFFFFF; }
/* textos */
.mensaje-hover span:not(.estrella){
position:absolute;
padding:10px;
transition:opacity .4s ease;
}
.texto1{ opacity:1; }
.texto2{ opacity:0; line-height:1.5; }
/* ordenador: hover */
.mensaje-hover:hover .texto1{
opacity:0;
}
.mensaje-hover:hover .texto2{
opacity:1;
}
/* móvil: sin hover -> mostrar directamente el segundo texto */
@media (hover: none){
.texto1{
opacity:0;
}
.texto2{
opacity:1;
}
}
</style>
Vale, una vez que lo tienes y lo pegas haremos una serie de modificaciones para que se adapte mejor a tu estilo del blog.
1. Lo primero que vas a ver va a ser lo siguiente:
<div class="mensaje-hover" tabindex="0">
<span class="texto1"> ESCRIBE AQUÍ LO QUE QUIERAS EN LA PORTADA </span>
<span class="texto2">
ESCRIBE AQUÍ LA INFORMACIÓN QUE QUIERAS
</span>
En este caso vas a escribir en ambos textos lo que quieras poner. El "texto1" corresponde a lo primero que se va a ver en el ordenador (en el caso de móviles y tabletas se verá solamente el "texto2"), y en el "texto2" colocarás la información que quieras que se vea cuando el cursor se encuentra encima del gadget.
2. Si bajas un poquito te vas a encontrar esto:
.mensaje-hover{
width:00px;
height:00px;
border:2px solid #FFFFFF;
border-radius:15px;
En "width:00px" y "height:00px" lo que se va a modificar va a ser el ancho y la altura del gadget (solo tienes que modificar los números que aparecen antes de "px". En mi caso, el "sidebar" que tengo mide unos 250px de ancho y el tamaño del gadget que tengo es de 160px de ancho y 220px de alto, por si alguien tiene el mismo tamaño que yo. Sin embargo, recomiendo ir probando para que tengáis el tamaño que más os convenga.
En el apartado de "#FFFFFF" podéis elegir el color del borde del gadget. Para que os sea más fácil os recomiendo usar la página web "HTML Color Codes".
3. Justo debajo de esto se encuentra:
background: linear-gradient(135deg, #FFFFFF 0%, #000000 50%, #FFFFFF 100%);
Estos van a ser los colores del fondo que se encuentran degradados. Para poner los códigos de los colores puedes volver a usar la misma página web que has usado antes.
4. Si vuelves a bajar un poco te vas a encontrar con:
font-family:'Yanone Kaffeesatz', sans-serif;
font-size:00px;
Esto corresponde al tipo de letra ('Yanone Kaffeesatz') y al tamaño de la letra. Para cambiar el tipo de letras debes escribir el nombre que tiene la tipografía completo para que no haya ningún error. En el caso de estar mal puesto creo que pone la que tienes por defecto en el blog.
5. Por último, vas a encontrarte con el siguiente apartado:
.e1{ top:-12px; left:18px; font-size:22px; color:#FFFFFF; }
.e2{ top:35px; left:-12px; font-size:13px; color:#FFFFFF; }
.e3{ top:-8px; right:22px; font-size:15px; color:#FFFFFF; }
.e4{ right:-12px; top:80px; font-size:22px; color:#FFFFFF; }
.e5{ bottom:35px; left:-10px; font-size:18px; color:#FFFFFF; }
.e6{ bottom:-12px; left:65px; font-size:12px; color:#FFFFFF; }
.e7{ bottom:15px; right:-10px; font-size:23px; color:#FFFFFF; }
.e8{ top:130px; right:25px; font-size:11px; color:#FFFFFF; }
Este va a corresponder al color de las estrellas que se encuentran en los bordes a modo de decoración. Puedes elegir los colores que quieras en la página que os he dejado antes para ajustarlo lo mejor posible a la estética de vuestro blog.
ʚ Y eso sería todo, espero que os haya ayudado para mejorar vuestro blog ɞ
Decidme que más cositas queréis que tengan tutorial jeje.
Un abrazo enorme para todos.
Atte. Vivi
No hay comentarios:
Publicar un comentario