Esta semana la cosa va de tutoriales, hoy vamos a aprender a dar formato a las entradas en blogger, y es que a veces lo que nos ofrece el editor de blogger se queda un poquito corto.
Como hay un montón de cosas de las que podemos hablar en este post, lo he dividido en unos cuantos. Hoy, aprenderemos a añadir estilo en la vista HTML.
Mediante esta opción, vamos a poder hacer lo que nos apetezca al contenido de nuestra entrada. Se trata de meter un poquito de CSS en una determinada parte para que se diferencie del resto. Esto lo podemos hacer de manera directa o definiendo clases.
La primera opción es para casos esporádicos y la segunda es conveniente si vamos a usar ese estilo frecuentemente.
AÑADIR ESTILO DIRECTAMENTEPara ello vamos a usar la siguiente etiqueta HTML:
<div style="Aquí el código CSS">Aquí el texto en cuestión</div>
Y esto se añade de la siguiente forma. Pasamos a vista HTML, para ello pinchamos en el botón de la izquierda, arriba del todo, que está al lado de redactar y que se llama HTML. Encontraremos un montón de código HTML y todo el texto que hayamos redactado hasta el momento. Ahí es donde tenemos que buscar el texto al que queremos dar estilo.
Antes de dicho texto vamos a meter el <div style="Código CSS"> y al final del mismo cerraremos la etiqueta poniendo el </div>
Una vez hecho esto, tenemos que definir el formato que queremos darle a ese cachito de texto, o lo que es lo mismo vamos a añadir el CSS. Este tiene que ir siempre entre las comillas dobles y cada definición la separaremos mediante punto y coma.
Vamos a ver estilos que nos pueden interesar y a continuación cómo quedaría dentro de la etiqueta div.
• Poner un color de fondo al texto:background: #555555; → Color de fondopadding:5px; → Establece la anchura del relleno
Es decir, si no tenéis puesto el padding el relleno del fondo se verá pegado al texto, mientras que si añadimos el padding quedará con un espacio que quedará mucho mejor. Veámoslo mejor en un ejemplo.
Esta parte no tiene padding.
Esta sí tiene padding, de 5px.
Esta también tiene padding, de 10px.
Si dentro queréis que el texto quede alineado en el centro, lo podéis cambiar directamente desde el editor, no hace falta que os tengáis que meter al CSS.
Por tanto, para hacer esto, nuestra etiqueta quedaría así:<div style="background:#555555; padding:5px;">Aquí el texto al que le aplicamos el estilo</div>
Por otro lado, si no queréis que el relleno ocupe toda la línea y sólo afecte al texto, la etiqueta cambia un poquito, usaríamos lo siguiente:<span style="background:#555555; padding:5px;">Aquí el texto al que le aplicamos el estilo</div>
Quedando de esta forma:
En esta parte el relleno sólo afecta al texto
• Poner un borde al texto:
border: 1px solid #555555; → Anchura, tipo (dashed, dotted, double...) y color del borde
padding: 5px; → Establece la separación entre el borde y el texto
En esto caso siempre es conveniente usar el padding porque queda muy mal ver el texto pegado al borde. Volvamos a verlo en un ejemplo:
En este párrafo no hay padding.En este párrafo no hay padding.En este párrafo no hay padding.En este párrafo no hay padding.En este párrafo no hay padding.En este párrafo no hay padding.En este párrafo no hay padding.En este párrafo no hay padding.En este párrafo no hay padding.
En este párrafo hay un padding de 5px. En este párrafo hay un padding de 5px.En este párrafo hay un padding de 5px.En este párrafo hay un padding de 5px.En este párrafo hay un padding de 5px.En este párrafo hay un padding de 5px.En este párrafo hay un padding de 5px.En este párrafo hay un padding de 5px.
Nuestra etiqueta resulta tal que así:
<div style="border: 1px solid #555555; padding:5px;">Aquí el texto al que le aplicamos el estilo</div>
Lo bueno de los bordes, es que no tenemos porqué usar todos. Es decir, puede que nos interese usar, sólo el debajo, como una especie de separador que ocupe todo el ancho del post (no como cuando se usa el subrayado del editor). Para ello se usa el siguiente código:
border-top: 1px solid #555555; → El de arribaborder-bottom: 1px solid #555555; → El de abajoborder-left: 1px solid #555555; → El de la izquierdaborder-right: 1px solid #555555; → El de la derecha
Veamos un ejemplo:Esta parte sólo tiene un borde abajoQuedando nuestra etiqueta así;<div style="border-bottom: 4px double #555555;">Aquí el texto al que le aplicamos el estilo</div>
Por supuesto, podéis combinar el borde con el color de fondo;
Esta parte tiene color de fondo, borde y un padding de 5px.Escribiríamos así nuestra etiqueta:
<div style="background: #eeeeee; border: 1px solid #555555; padding:5px;">Aquí el texto al que le aplicamos el estilo</div>
O también podemos usar un sólo borde y darle otro aspecto:
Este párrafo tiene un borde más ancho a la izquierda, color de fondo y padding de 5px.Este párrafo tiene un borde más ancho a la izquierda, color de fondo y padding de 5px.Este párrafo tiene un borde más ancho a la izquierda, color de fondo y padding de 5px.Así queda nuestra etiqueta:
<div style="background: #dddddd; border-left: 3px solid #555555; padding:5px;">Aquí el texto al que le aplicamos el estilo</div>• Cambiar la tipografía de una determinada parte:
font: normal normal 12px Montserrat; → Tamaño y tipo de fuenteY por supuesto, lo podemos combinar con el resto de cosas vistas hasta ahora:
Esta parte tiene borde punteado, padding de 5px, color de fondo y otra tipografía. Esta parte tiene borde punteado, padding de 5px, color de fondo y otra tipografía. Esta parte tiene borde punteado, padding de 5px, color de fondo y otra tipografía.Esta parte tiene borde punteado, padding de 5px, color de fondo y otra tipografía.La etiqueta es así:<div style="background: #dddddd; border: 1px dotted #555555; font: normal normal 12px Montserrat; padding:5px;">Aquí el texto al que le aplicamos el estilo</div>
El color de la letra lo podéis cambiar desde el editor normal. Otra cosa que me gusta hacer a los textos es variar el espaciado entre las letras. Para ello usamos esto:letter-spacing:4px; → Cuanto espacio hay entre letras
Veámoslo en ejemplos:
Este parte no tiene espaciado entre letras.
Esta parte tiene un espaciado de 5px.
Y una vez más lo podemos combinar con el resto de cosas:
Este párrafo tiene de todo lo que hemos visto hasta ahora. Este párrafo tiene de todo lo que hemos visto hasta ahora. Este párrafo tiene de todo lo que hemos visto hasta ahora. Este párrafo tiene de todo lo que hemos visto hasta ahora. Este párrafo tiene de todo lo que hemos visto hasta ahora.Visto todo esto, vamos a ver cómo lo haríamos definiendo clases
DEFINICIÓN DE CLASESAhora nuestra etiqueta cambia y es así:
<div class="nombre">Aquí el texto en cuestión</div>
En nombre podemos poner el que nos apetezca. En la vista HTML sólo tenemos que añadir esto el resto lo haremos añadiendo el CSS directamente a nuestro plantilla. Para ello vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos:
.nombre{
Aquí todo el estilo que le queramos dar}
Para darle formato a esa clase, usamos un punto seguido del nombre que le hemos dado a la clase y abrimos llaves. Dentro de ella pegamos todo el código que nos apetezca, es el mismo que hemos visto hasta ahora. Ejemplos:
.nombre{background: #dddddd;padding:5px;border: 1px solid #555555;font: normal normal 12px Montserrat;letter-spacing:3px;}Y ya esta, ahora en todas las partes de vuestro post que estén metidas entre la etiqueta que hemos visto tendrán ese estilo :D Como veis nos ahorra un buen trabajo ;)
Espero que os haya gustado este tutorial y dentro de poco seguimos con esto ;)
Pasad un jueves muy chachi!! Besotes muy fuertes!! Laura.