¡Hola a todos, limoneros! ¿Qué tal os está tratando el verano? Hoy os traigo un nuevo nuevo nuevísimo tutorial, tan fresquito como un heladito ☆ヾ(*´・∀・)ﾉ Pero antes de entrar en materia, os dejo los tres tutoriales anteriores, por si les queréis echar un vistazo.
PERSONALIZAR EL BLOQUE DE CITAS EN MENOS QUE CANTA UN GALLO | ENMARCAR UN TEXTO EN BLOGGER | PERSONALIZAR EL ANUNCIO DE COOKIES |
Ahora que ya os he puesto un poquito de spam [Perdonadme por ello, por favor (ノ°Д°）ノ︵ | ] toca hablar del nuevo tutorial. ¿Preparados? ¡Allá vamos!
El tutorial de hoy es requetefácil, así que no hace falta que seáis expertos en CSS o en HTML para hacerlo, puesto que solo va a ser seguir los pasos, copiar [o quitar] los códigos que os daré. Pero, antes de empezar, me gustaría que tuvierais abierta una pestaña con los códigos hexadecimales de los colores [HTML COLOR CODES] y que hagáis este tutorial en un blog de prueba, por si algo sale mal o por si queréis experimentar os sentiréis más seguros que si lo hicierais en el blog 'de verdad'. Luego, una vez os haya quedado como queráis, ¡simplemente tendréis que copiar el código!
En el caso de que quitéis algo del HTML, recordad SIEMPRE guardar una captura de pantalla y el código en un documento WORD o DRIVE, por si lo queréis volver a poner.
PRIMER PASO: AÑADIR CSS |
Para añadir el CSS debemos ir a la PLANTILLA → Personalizar → Avanzado → Añadir CSS. Y añadimos el siguiente código:
.sidebar .widget {
border: 2px solid #F3E2A9; /* Apariencia del borde */
}
.sidebar .widget-content {
padding: 10px;
}
.sidebar .widget h2 {
text-align: center;
z-index: 8;
top: -10px;
background: #FFFFFF; /* Fondo de la cajita del título */
left: 50%;
transform: translate(-50%, 0);
display: inline-block;
}
.sidebar .widget h2:after,.sidebar .widget h2:before {
content: "\00a0\00a0";
}
border: 2px solid #F3E2A9; /* Apariencia del borde */
}
.sidebar .widget-content {
padding: 10px;
}
.sidebar .widget h2 {
text-align: center;
z-index: 8;
top: -10px;
background: #FFFFFF; /* Fondo de la cajita del título */
left: 50%;
transform: translate(-50%, 0);
display: inline-block;
}
.sidebar .widget h2:after,.sidebar .widget h2:before {
content: "\00a0\00a0";
}
Con este código, el borde de los gadgets os quedará tal y como lo tengo yo en el blog de pruebas:
 |
| Perdonad la mala calidad >.< |
SEGUNDO PASO: PERSONALIZAR el borde |
Pero todo en esta vida se puede personalizar [O, al menos, en Blogger] para que esté acorde con vuestro blog o tenga un aspecto diferente al que he puesto yo.
1. Border: Como es evidente, aquí indicamos las propiedades que tendrá el borde.
-3px: el grosor en píxeles. Cuánto más elevado sea el número, más grosor tendrá el borde.
-Solid: el estilo del borde, en este caso una línea sólida. Podéis probar también con dotted [puntitos] o double [dos bordes]. Aunque depende del estilo tendréis que aumentar los píxeles para que se note. Podéis mirar como quedan en esta imagen → AQUÍ
-#F3E2A9: color del borde. En HTML COLOR CODES encontraréis infinitas posibilidades.
*Podéis poner un borde redondeado si queréis, añadiendo este código → border-radius:10px; justo debajo de border: 2px solid #F3E2A9; /* Apariencia del borde */
*Si solo queréis que haya un borde, debéis añadir -top,-left ,-right ,o -bottom detrás de border:. POR EJEMPLO:
border-top: 2px solid #F3E2A9;
 |
| Y espero que me volváis a perdonar por la mala calidad de la captura de pantalla >.< |
2. Padding: es la separación que habrá entre los gadgets. Podéis aumentarlo o disminuirlo a vuestro gusto.
3. top: -10px: esto es la separación que tiene el título de los gadgets respecto a la línea de arriba del borde. Os recomiendo que la dejéis así puesto que queda centrado.
4. background: #FFFFFF: lo que hace que este enmarcado quede así, con el título en medio y no dentro, es la propiedad anterior y esta, puesto que en realidad no es que la línea superior 'atraviese' el título sino que el título está dentro de una cajita, cuyo background es blanco #FFFFFF y por ello queda así. Os pongo un ejemplo sobre lo que pasa si cambio el color del background:
background: #F6D8CE;
Evidentemente, podéis cambiarlo si queréis, si os gusta más que se vea la cajita del título.
Por otro lado, quizá tenéis algun gadget que no queréis enmarcar, como yo he hecho con la primera imagen en el blog de pruebas. VER DEMO Para conseguir que un gadget no tenga el efecto que los demás [eliminando completamente este efecto o cambiando las propiedades] debéis buscar el ID del gadget en cuestión: PLANTILLA → Editar HTML Y buscamos el nombre del gadget. En mi caso, la imagen no tenía título pero está encima del gadget de seguidores, por lo que busqué el título de este gadget ÚNETE y justo encima salía el gadget de la imagen:
<b:widget id='Image1' locked='false' title='' type='Image' visible='true'>
<b:widget id='Followers1' locked='false' title='ÚNETE' type='Followers' visible='true'>
Y tal y como deducís, el ID de un gadget es lo que está detrás de id=. Debemos recordar esta ID para añadirla en Añadir CSS de la siguiente forma:
#Image1 {
border: none;
{
Con este código le estoy diciendo que no me ponga borde en este gadget, aunque también podemos decirle que solo quite un borde [EJ: border-left: none;] o que le cambie el color [border: 2px solid #cccccc; ]
¡Y ya está! A simple vista parece difícil pero básicamente es ir experimentando a ver con qué efecto nos gusta más el borde. Podéis probar diferentes combinaciones de colores y de estilos, ¡todo está permitido! Y ya sabéis, si tenéis alguna duda o queréis comentarme algo, podéis hacerlo en los comentarios o enviarle un mail. ¡Espero que este tutorial os haya sido de ayuda!
COMPARTE ESTE POST EN:
| GOOGLE + |
Gracias ♥
Psst, pstt. ¿Os queréis perder la próxima entrada? Si la respuesta es no, apuntaos al blog → SÍGUEME