Poner color de fondo a un texto en una entrada de blogger

En ocasiones necesitamos resaltar una palabra o un texto dentro de una entrada. Podemos hacerlo poniéndoles un fondo de color diferente, obviamente, al color del fondo de la entrada, así: Poner color de fondo a una palabra El siguiente código es apropiado para poner color de fondo a una palabra, o a varias palabras que no excedan una línea dentro de un texto: <span class="apple-style-span" style="background-color: #fe4a4a;">&nbsp;Aquí la palabra o palabras&nbsp;</span> #fe4a4a es el código correspondiente al color del fondo; lo cambiamos por el nuestro. Las palabras puestas dentro del anterior código se verán así:  Aquí la palabra o palabras  El color de los caracteres será el mismo que tiene, por defecto, el texto de la entrada (en este blog es blanco). Para ponerles un color diferente ponemos las palabras dentro de las etiquetas que le asignan el color, debiendo el código quedar así (las etiquetas agregadas están en rojo): <span class="apple-style-span" style="background-color: #fe4a4a;">&nbsp;<font color="#000000">Aquí la palabra o palabras</font>&nbsp;</span> #000000 es el código correspondiente al color puesto a los caracteres del ejemplo; lo cambiamos por el nuestro. La palabras puestas dentro del anterior código se verán así:  Aquí la palabra o palabras    Poner color de fondo a un texto El siguiente código pone color de fondo a un texto: <p style="background-color:#fe4a4a; padding:3px;">Aquí el texto</p> #fe4a4a es el código correspondiente al color del fondo; lo cambiamos por el nuestro. padding:3px asigna un espacio entre el texto y los bordes del fondo; si queremos que ese espacio sea mayor aumentamos el número de pixeles (px). Un texto puesto dentro del anterior código se verá sí: Aquí el texto Aquí el texto Aquí el texto Aquí el texto, Aquí el texto Aquí el texto Aquí el texto; Aquí el texto Aquí el texto Aquí el texto, Aquí el texto Aquí el texto. El color del texto será el mismo que tiene, por defecto, el texto de la entrada (en este blog es blanco). Para ponerle un color diferente agregamos, dentro del código, la propiedad que le asigna el color, debiendo el código quedar así (la propiedad agregada está en rojo): <p style="color: #000000; background-color:#fe4a4a; padding:3px;">Aquí el texto</p> #000000 es el código correspondiente al color puesto al texto del ejemplo; lo cambiamos por el nuestro. Un texto puesto dentro del anterior código se verá así: Aquí el texto Aquí el texto Aquí el texto Aquí el texto, Aquí el texto Aquí el texto Aquí el texto; Aquí el texto Aquí el texto Aquí el texto, Aquí el texto Aquí el texto. Twittear

Esquina doblada para entradas de Blogger

Con un sencillo código CSS podemos poner un fondo a las entradas del blog, con el efecto de esquina doblada. Vamos a Editar HTML: Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ► Localizamos la siguiente etiqueta poniéndola dentro del cuadro de búsqueda (Search): ]]></b:skin> ...y antes de la misma pegamos el siguiente código: .post {    background: #f6d8ce;    margin: 2em auto;    overflow: hidden;    padding: 1em 1.5em;    position: relative;    width: 560px; } .post:before {    content:"";    position: absolute;    top: 0;    right: 0;    border-width: 0 50px 50px 0;    border-style: solid;    border-color: #ffffff #ffffff #ff4000;    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);    -moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);    box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2); } Tal y como está el código las entradas se verán como la entrada de la Demo. Las propiedades resaltadas en rojo las debemos modificar para adaptarlas al diseño de nuestro blog: background: #f6d8ce;: Es el color del fondo de las entradas. Cambiamos el código hexadecimal del color por el nuestro. width: 560px;: Es el ancho del fondo de la entrada. Debemos poner un ancho que no exceda al ancho del cuerpo de las entradas. border-width: 0 50px 50px 0;: Corresponde al ancho y al alto de la pestaña o esquina doblada. Podemos modificar las dimensiones (50px 50px), pero conservando la igualdad. border-color: #ffffff #ffffff #ff4000;: Corresponde a: #ffffff #ffffff: Es el color del borde o espacio que deja libre la esquina doblada. Se pone dos veces para lograr el efecto de la "doblez". Este color debe ser igual al del fondo del blog, ya que si se pone otro se verá el espacio que deja la esquina doblada. #ff4000: Es el color de la pestaña o cara visible de la esquina doblada. Se recomienda poner un color del mismo tono de el del fondo de las entradas, pero más oscuro. Nota: Este efecto no funciona con Internet Explorer Twittear