16.7.16

Añadir un borde a los gadgets (sin que el título quede dentro) | Tutorial



¡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";
}

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. Paddinges 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ónPLANTILLA → 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:


FACEBOOK


TWITTERGOOGLE +

Gracias 

Psst, pstt. ¿Os queréis perder la próxima entrada? Si la respuesta es no, apuntaos al blog → SÍGUEME

4 comentarios:

  1. Hola :)
    *pensaba que ya había comentado pero ya veo que no T_T*

    Muchas gracias por estos tutoriales, la verdad es que a mí me vienen de perlas. Encima nos lo explicas super bien ♥

    Saludos.

    ResponderEliminar
  2. Buen post y muy útil para todos los que están empezando.
    Me ha gustado tu blog y te he seguido, si quieres puedes seguirme a mí, sale la dirección en mi perfil. Muchas gracias. ¡Nos leemos!

    ResponderEliminar
  3. ¡Hola!
    A mi el diseño y todo lo relacionado con él se me hace cuesta arriba. De verdad, por ganas no es (me gusta mirar tutoriales como este y aprender) pero no se me da muy bien. Así que te agradezco muchísimo haber hecho este post, es de gran ayuda. Tengo en mente un proyecto (al que aún hay que darle mucha forma) para un nuevo blog, así que intentaré aprender más a ver si yo me puedo encargar del diseño.
    ¡Muchas gracias por la ayuda! ¡Un beso!

    ResponderEliminar
  4. Millones de gracias!!!! Llevo días buscando un código que funcionara para conseguir este tipo de bordes, he probado varios y ninguno había dado resultado. Me ha sido de gran ayuda!

    Saludos

    ResponderEliminar

Muchas gracias por tomarte el tiempo de comentar. Un blog se alimenta de tus comentarios. Y todos los comentarios son una gran alegría para mí ^^