SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.



CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a [email protected] y hablemos.

Suscríbete

Curso gratis paso a paso para crear un blog y diseñarlo a tu gusto con videotutoriales

Estilos CSS para personalizar tus entradas de forma automática

Personaliza partes de tu entrada con estilo css automático en Blogger


En esta ocasión vamos a hablar de algo que me venís pidiendo desde hace mucho pero que no he tenido tiempo antes para llevar a cabo.

¿Cómo añadir estilos concretos y específicos en ciertas partes de mi entrada de forma automática y estable?

Lo que se busca es crear estilos automáticos como cuando hacemos clic en la "blockquote" o texto citado. Cuando hacemos clic ahí Blogger añade un estilo predeterminado a ese texto o párrafo seleccionado.

Esto se puede conseguir de forma ilimitada con muchos estilos que puedes predeterminar. La única diferencia es que realmente no vas a seleccionar el texto y darle a un botón, si no que tendrás que escribir toda la entrada y luego aplicar los estilos predeterminados editando la entrada en HTML.

Es así, en Blogger podemos hacer muuuuchas cosas, pero siempre se condicionará a usar código. Es un beneficio, aunque también tenga sus inconvenientes.

Una vez que sabes de lo que hablamos vamos a entrar en detalles.

Estilos CSS para resaltar partes de la entrada

Ántes de nada debemos tener claro qué estilo queremos crear y en qué casos lo usaremos. Por ejemplo, imagina que quiere tener siempre un apartado de advertencia. En este recuadro deberías añadir un estilo vistoso y llamativo para que la lectora o el lector repare en esa parte. Te comparto un ejemplo de los distintos avisos que podrías añadir.



Para lograr esto simplemente tienes que añadir unas clases en la parte HTML de tu entrada en esas frases.

Primero las escribes, y luego les colocas el código de la clase antes , para abrir el estilo y al final, para cerrarlo.

Por ejemplo , en el caso de "Error, no deberías hacelo así" le llamo a la clase "error" así lo recuerdo de forma sencilla. De esta manera tendría que añadir lo siguiente.



<p class="caja error"> Error, no deberías hacerlo así</p>



Si le quieres añadir un icono de alerta, puedes añadir de Font Awesome de esta manera:


<p class="caja error"><i class="fa fa-exclamation-circle"></i> Error, no deberías hacerlo así</p>
Para poder añadir estos iconos debes tener este código antes de <head> en tu plantilla:


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>



Para añadir el estilo a esta clase debes copiar y pegar el siguiente código en tu plantilla, haz antes una copia de seguridad por si acaso. El CSS va siempre antes de :


]]></b:skin>


Y el CSS que deberías copiar es el siguiente:


.caja {position:relative;display:block;background-color:#FAFAFA;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid}
.caja p{margin:0 !important;padding:0;line-height:22px;font-size:13px;color:#2f3239}
.caja span{font-size:16px !important}
.caja.error{background-color:#FFD7D2;border-color:#FF9494;color:#F55D5D}
.caja.error a,.caja.error span{color:#F55D5D}
.caja i { font-size: 16px; line-height: 20px;}.caja.error:before{ content:"\f06a" font-family: FontAwesome; float: right; margin-left: 5px;}.fa-exclamation-circle:before{content:"\f06a"}

Como ves le damos estilo a la clase "caja" y la la clase dentro de esta clase que es "error", porque si después queremos hacer una clase igual pero cambiando solo unos colores o iconos, entonces solo debemos cambiar el CSS de ".caja.error" y en vez de "error" poner "aviso" o como queramos llamar a otro estilo con otros motivos y colores.

De esta manera en el HTML de tu entrada deberás añadir en la "class='aquí tu clase'" las dos clases que has creado. Por eso pongo "class='caja error'" porque estoy añadiendo ambas clases. Como debería ser.


Quedaría así en tu entrada:


Error, no deberías hacerlo así




Otros estilos diferentes para personalizar mis entradas

Para poder personalizar tus entradas según tus intereses debes usar el mismo patrón, pero modificar los estilos adaptándolos a lo que quieras conseguir. Es así de simple, que no significa que sea fácil.

Al no conocer el significado de cada código de manera fluída nos puede costar mucho. Puedes visitar el post de cómo > personalizar los títulos del sidebar <, o > cómo personalizar los títulos de las entradas < para guiarte e ir creando estilos.

En este sentido tengo pensado crear varios estilos diferentes para compartir pero por el momento no tengo mucho tiempo, así que espero que esto te haya servido de ayuda.

Recuerda que si quieres puedes jugar solo con márgenes  tanto a un lado como al otro, arriba o abajo

margin:20px;margin-left:10px;margin-right:20px;margin-top:10px;margin-bottom:10px;

Esas cantidades en píxeles las he puesto solo como ejemplo y sin sentido. Juega con ello.




 Recuerda no añadir ancho o alto (width o height) si no es en porcentaje para que cuando se vea tu entrada en versión responsive, móvil, se adapte de forma automática. Lo ideal es width:100%


También puedes jugar con otras muchas cosas... Debes esforzarte por crear algo distinto y original dependiendo de lo que busques. También te servirá el post de > personalizar texto citado.<




¡Hasta la próxima!


Contacta conmigo si quieres dejar en mis manos la personalización de tu blog. 



2 comentarios

  1. Muy interesante Mónica, gracias por compartir estos consejos que nos pueden ir muy bien. En cuanto pueda los probaré, pero antes por si acaso haré la copia de seguridad.
    Saludos

    ResponderEliminar
    Respuestas
    1. Siii, Conxita, la copia de seguridad es imprescindible!! A ver si te resulta útil

      Muchas gracias por comentar!!
      Muack!!

      Eliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.