Tutorial: Cómo agregar cajas de advertencia en Blogger


¡Hola!

Hace un montón de tiempo que no publicaba un tutorial para Blogger. Además, este tutorial lo tenía terminado y estaba entre mis borradores listo para ser publicado. El tutorial muestra cómo agregar cajas de advertencia a nuestras entradas. Yo las cajas de advertencia las uso, en su mayoría, en las reseñas aclarando si el libro contiene contenido adulto o si fue un eARC. Aquí una imagen:alertboxes

Añadir las cajas de advertencia en Blogger es demasiado fácil. Todo lo que tenemos que hacer es hacer un CSS y div class especialmente para las cajas. Los códigos que encontrarán a continuación son tres códigos que he hecho para tres cajas de advertencia diferentes: alerta de contenido adulto, alerta de spoilers y alerta de aclaración para reseñas.

Aquí les dejo una captura de pantalla para cada advertencia junto con su respectivo codigo CSS. Si gustan verlos en el blog de pruebas, entonces pueden hacerlo dando clic en el siguiente botón.

Blog de pruebas

Advertencia de contenido

contentwarning_mini

.contenido {
background: #db1c25;
text-align: justify;
color: white;
font-weight: normal 400;
font-size: 18px;
border-radius: 4px;
padding: 10px;
}

Advertencia de spoilers

spoilerswarning_mini

.spoiler {
background: #000;
text-align: justify;
color: white;
font-weight:  normal 400;
font-size: 18px;
border-radius: 4px;
padding: 10px;
}

Advertencia de aclaración para reseña

disclosurewarning_mini

.alerta {
background: #62af49;
text-align: justify;
color: white;
font-weight:  normal 400;
font-size: 18px;
border-radius: 4px;
padding: 10px;
}

Para agregar los códigos CSS a su plantilla Blogger, vayan al editor HTML de su plantilla y busquen la siguiente línea <b:skin>…</b:skin> (hagan clic en los tres puntos sustantivos). Una vez que hayan extendido el código CSS, busquen el siguiente código ]]></b:skin> (Opriman CTRL + F para encontrarlo más fácilmente). Una vez que hayan localizado el código, todo lo que tienen que hacer es pagar los códigos para las cajas de advertencia antes del pedazo de código que han localizado. Ejemplo:

contentboxescode_mini

Antes de guardar los cambios en su plantilla, opriman “Obtener vista previa de plantilla” para asegurarse de que no se ha roto ningún otro código. Tomen en cuenta que no tiene que ver ningún cambio en el diseño de su plantilla.

Ahora cada vez que quieran usar las cajas de advertencia en sus entradas, todo lo que tienen que hacer es usar el siguiente div class:

<div class=”alerta/spoilers/contenido”>Contenido para la advertencia</div>

¡Espero que el tutorial les haya gustado y les sea de ayuda! 😀 En el próximo tutorial, tengo planeado mostrarles cómo personalizar los encabezados para las entradas como lo siguiente:

¿Les interesaría?

Siempre sonrían,

Sobre Annaiss

Annaiss es una chica veinte-tantos años, es introvertida y una fangirl. Vive en USA y desde que estudió Español en el octavo grado de secundaria se enamoró de su idioma natal y ahora lo practica de la mejor manera que puede: blogging. Le gusta leer de todo género, aunque prefiere el Romance contemporáneo. Puedes encontrarla en Twitter, Facebook e Instagram.

Publicado en 23/05/2015 por Annaiss en Tutorial / 9 Comments

Etiquetas: ,

9 Responses to “Tutorial: Cómo agregar cajas de advertencia en Blogger”

  1. Me ha encantado tu entrada. La verdad es que soy fan del diseño gráfico pero no se me da muy bien. No sé cómo poner el div class. 🙁 ¿Me explicas?

    No me odies. jaja

  2. This even signifies that the profession of a plot surveyor is often a tough one and requirements dedication and commitment.

    Thanks to the MLS listings available on the internet, now now
    you may simply flick through these listings to determine what
    they are looking for. The kentislandlifestyle site not only provides correct property listings legitimate estate
    investment, however the owner of the website who is additionally a professional inside the real estate market will direct you
    to produce all sorts of crucial decisions whether you’re purchasing a starter home, your dream home or an investment property.
    https://chungcudiamondtower.net recently posted…https://chungcudiamondtower.netMy Profile

  3. As Indore is well set through the River Narmada Valley in the western a part of the state.
    But while using soaring rental values it would
    appear that purchasing flats in Bangalore has become a distant dream.
    If you have a pal or neighbor that’s happy to have their number provided as
    an emergency contact that can be a great benefit.
    chungcugoldseasons.info recently posted…chungcugoldseasons.infoMy Profile

Leave a Reply

CommentLuv badge