Porque te gusta toquetear código, quieres personalizar tu blog en Blogger, aprender a usar y entender código CSS básico y personalizar los títulos de gadget en el sidebar en este tutorial aprenderás muchísimo de código CSS y HTML básico de personalización, si estás en tus inicios.

No solo por lo que realmente se explica en el tutorial si no porque te facilito código CSS variados enteros y preparados que podrás usar para aplicar en otras posibles ocasiones y poder personalizar texto y partes en el blog o web.

Por ejemplo, con este código CSS podrás personalizar el menú de páginas. Pásate luego por el tutorial en el que te enseñamos a crear un menú de páginas responsive y con iconos de redes sociales en la plataforma Blogger. 

[cta id=’2095′]

Estos códigos podrán ayudarte a personalizar tu blog o web en todas aquellas partes que desees. Como hablamos de código CSS te vale también para cualquier tipo de plataforma: WordPress, Wix, Squarespace…

Aunque personalmente como profesional del mundo del Blogging te recomiendo que solo uses :

• Como opción gratuita Blogger
• Como opción de pago WordPress.org

Voy a resumir el código total explicando para qué sirve cada código. Esto resulta muy útil si todavía no estás acostumbrada a manejar código, ya que a veces se nos olvida lo que significa cada código CSS, y es importante conocer cada uno para jugar con una buena personalización hasta lograr lo que buscamos.

Para llevarlo a cabo te recomiendo que también visites este otro tutorial:

EL CÓDIGO CSS para personalizar títulos de gadgets

Trabajaremos siempre sobre este código editando detalles:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive; /*Tipografía de texto*/
font-size:(nº)px; /*Tamaño de texto*/ 
color: #color; /*Color de texto*/ 
text-transform: uppercase; /*Texto en mayúscula*/   
text-transform: lowercase; /*Si quieres minúsculas*/ 
letter-spacing: (nº)px; /*Espacio entre letras*/ 
text-align: center; /*Alineación centrada del texto cambia según prefieras a right-derecha left-izquierda*/ 
background-color: #color; /*Color de fondo*/ 
border-radius: 50px; /*para bordear todas las esquinas*/   
border-radius: 50px 0px 0px 0px; /*Si prefieres redondear la esquina arriba a la izquierda*/   
border-radius: 50px 50px 0px 0px; /*Para redondear las dos esquinas superiores*/   
border-radius: 50px 0px 50px 0px; /*Para redondear la esquina arriba izquierda y abajo derecha*/ border-radius: 50px 0px 0px 50px; /*Para redondear las dos esquinas de la izquierda.*/ 
border: (nº)px solid #color; /*Para poner un marco de línea sólida alrededor.*/
}

Explicación del código CSS «border»

En los bordes se usar el código «border» o bien «border-color», «border-radius», «border-style» … Como ves hay diferentes aplicaciones. Para personalizar el borde al completo usaremos «border» unicamente. Hablamos de esta línea del código anterior:

border: (nº)px solid #color; /*Para poner un marco de línea sólida alrededor.*/

Sustituye “solid “ para a conseguir el efecto deseado;

Sólida.

Punteado.

Con rayas.

Doble línea.

• solid → línea de borde solida
• dotted → línea de borde punteada con píxeles/cuadraditos
• dashed → línea de borde con rayas
• double → línea de borde doble con línea sólida

O un borde con efecto de botón, con sombras:

Marco con sombra oscura.

Marco con sombra clara.

Efecto caja 3D interior.

Efecto caja 3D exterior.

• groove → marco con sombra oscura
• ridge → marco con sombra clara
• inset → sombra a la derecha abajo
• outset → sombra arriba a la izquierda

Si lo que quieres es poner el borde solo en ciertas partes presta atención.

Tal y como lo tenemos a continuación solo tendríamos que hacer lo siguiente

Cómo poner bordes diferentes en un solo elemento, una línea arriba y otra abajo

Línea arriba y otra abajo.

border-top: 3px double #333; 
border-bottom: 3px double #333; 
border-right: 0px double #333; 
border-left: 0px double #333;

Sustituye el número 3 por el grosor en píxeles de la línea que quieras. Tiene que ser superior a 0. En el siguiente ejemplo he usado 5px.

Línea arriba y otra abajo.

Aquí tienes lo que significa cada palabra del código:

• top → arriba
• bottom → abajo
• right → derecha
• left → izquierda

Si te fijas le hemos dado valores mayores que cero a top y bottom para que las líneas que aparezcan sean esas.

El código del color corresponde al #333 que deberías sustituir por el código CSS de color de tu paleta de colores que prefieras.

[cta id=’2095′]

Cómo poner al título del gadget una línea a ambos lados

Línea a la izquierda y otra a la derecha.

border-top: 0px double #333; 
border-bottom: 0px double #333; 
border-right: 3px double #333; 
border-left: 3px double #333;

En este caso le damos valores mayores a cero a right y left para que las líneas aparezcan a ambos lados del texto. 

Recuerda sustituir el grosor y el código CSS del color que te interese.

Cómo poner al título del gadget una línea abajo normal y a la derecha doble

Cómo poner de borde una línea abajo normal y a la derecha doble

Línea a la izquierda y otra a la derecha.

border-top: 0px double #333; 
border-bottom: 3px solid #333; 
border-right: 3px double #333; 
border-left: 0px double #333; 

Añade

padding: 5px; /*espacio entre los bordes para que se alejen del texto*/

Si quieres que quede más pegado abajo y más alejado de arriba o viceversa, personalizamos por separado cada espacio:

Línea a la izquierda y otra a la derecha.

padding-rigth: 5px;
padding-left: 5px; 
padding-top: 5px; 
padding-bottom: 10px;

Podemos usar píxeles o porcentajes. Si usamos porcentajes, deben de ser muy bajos.

Si de fondo prefieres poner una imagen que has diseñado para el fondo de tu menú entonces anota.

Cómo poner con código CSS una imagen de fondo

Este es el código para sustituir por el background-color: #FFFFFF; si queremos insertar de fondo una imagen:

background: url(URL de la imagen) bottom no-repeat; 

Si no saber cual es la URL de tu imagen mira cómo conseguirlo aquí:

    Por último os pego un código que usé hace un tiempo , el cual su resultado es este :  

Es para modificar el título de los gadgets del sidebar en la plataforma de Blogger.

 Si te gusta puedes usarlo, le cambiaría el tamaño del texto porque queda muy grande, pero en fín, ahora ya puedes modificar lo que quieras! 🙂    

.sidebar h2 {font-family: 'Amatic SC', cursive; /*Tipo de letra*/ 
font-size:20px;/*Tamaño de texto*/ 
color: #ffffff; /* Colore del texto*/ 
text-transform: uppercase;/*Para que el texto se transforme a mayúsculas*/ 
letter-spacing: 3px;/*Espacio entre carácteres*/ 
text-align: center;/*Situación del texto en el recuadro, he puesto centrado*/ 
background-color: #ffd0c4;/*Color de fondo*/ 
padding-top: 5px;/*Separación arriba*/ 
padding-bottom: 5px;/*Separación abajo*/ 
border-radius: 50px 0px 0px 50px;/*Efecto redondeado a la izquierda, en las esquinas de arriba y de abajo*/ }

Recuerda que debes instalar el tipo de letra que quieres usar, tienes un tutorial aquí para instalar fuentes de Google.    

Recuerda que debes instalar el tipo de letra que quieres usar, tienes un tutorial aquí para instalar fuentes de Google.    

• Son importantes los ; (puntos y comas) del final de cada personalización y detalle, porque es como el punto que lo cierra, si no te dará error.  
• Son importantes los } de abrir y cerrar, por el mismo motivo que el anterior.  
• No son importantes los “no números”, de hecho si no pones nada aquí,  

border-radius: 50px 0px 0px 0px;

no va a pasar nada, simplemente no aparecerá. De hecho yo tengo casi todos los códigos en cero, por si quiero cambiarlo he decidido dejarlo ya copiado. Pero queda mucho más limpio si eliminamos los valores cero.

También debes saber que al escribir las cuatro partes aunque tengan valor cero cada parte habla de una zona. La primera  y la última son arriba y abajo y las dos del medio son de izquierda y derecha.   

• Eso mismo que comentaba, si no queremos ningún borde, o marco, basta con eliminar ese detalle, esa línea.  

• Para conseguir códigos de colores HTML ve a este enlace donde puedes sacar códigos, pero te recomiendo que tengas los códigos anotados de tu paleta de colores para el blog. Así cuando necesites usarlos para este tipo de cosas sólo tendrás que escribirlo 😉

• Si vas a usar una imagen de fondo en vez de un color deberás tener cuidado con las medidas. Además podemos saber el ancho de nuestro sidebar de la siguiente manera:  

Abrimos la ventana de Ver Blog → en nuestro blog colocamos el ratón sobre alguno de nuestros títulos de la sidebar y damos click con el botón derecho → buscamos inspeccionar elemento y le hacemos click.  

Entonces aparecerá seleccionada la zona y un cuadradito con la medida. Además en el cuadro que se abre abajo a la izquierda encontrarás la selección concreta del título y así, al pasar el ratón por encima directamente te saldrá la medida 🙂   

Esta también es muy buena manera para copiar los códigos de colores que existen en el blog. Estos están en el recuadro derecho que sale abajo. Es algo que uso muchísimo. Espero que este truquillo te ayude también a ti 😉    

• Recordar que donde pone #333 hay que escribir el código del color elegido, donde pongo 3  es siempre el valor que debes sustituir. En el caso de (URL de imagen) la imagen va entre esos mismos paréntesis, esos sí que permanecen.    

Por último adelantaros que si no queréis tener en todos los títulos iguales de la sidebar también es posible a través de otro código que te explico aquí.  

Una frase para reflexionar hoy 🙂  

Casi todo lo que realice será insignificante, pero es muy importante que lo haga. Mahatma Gandhi

Tweet