BLOGGERS: CAJAS CON BORDES REDONDEADOS

Vamos a ver una forma de formar CAJAS o BOX de color con BORDES REDONDEADOS o ESQUINAS REDONDEADAS, usando sólo código CSS, y que se puedan ver en todos los navegadores, incluso en INTERNET EXPLORER (es sabido lo difícil que es que los IE6 a IE8 puedan reproducir bordes redondeados). En la fotografía adjunta se pueden apreciar diferentes CAJAS o BOX con bordes redondeados por éste procedimiento. Son cajas con esquinas redondeadas creadas mediante añadir elemento de HTML en Blogger. Por ejemplo, en la foto adjunta, la caja redondeada de color rojizo con unos pequeños monstruos.



Las instrucciones PARA INTRODUCIR TEXTO O SECCIONES DE UN BLOG EN CAJA DE BORDES REDONDEADOS a seguir son las que se indican a continuación, prestando atención a cambiar el ancho de la CAJA o el color del background según se desee, porque aquí en el ejemplo, el máximo de anchura está fijado en 700 px y el color es el ccOOOO, que es rojo:

Se debe ir a DISEÑO, en BLOGGER y allí abrir el código HTML. Huelga decir de la conveniencia de antes sacar una copia de la plantilla y antes de grabar, usar el VISTA PREVIA, (recordando la máxima de todo blogger de que no te cansarás de usar y de abusar de la VISTA PREVIA).

Y este sería el código CSS a instalar antes de <!-- ]]></b:skin> -->

<!--

#caja1 {

max-width: 700px; /*ANCHO TOTAL DE LA CAJA*/

margin:0px auto;

}

.redondeado1 {

height: 1px;

overflow: hidden;

background-color: #cc0000; /* COLOR DE LA CAJA */

}

/* LAS LINEAS PARA FORMAR LA PARTE REDONDEADA */

.l1 { margin: 0 12px;}

.l2 { margin: 0 9px;}

.l3 { margin: 0 7px;}

.l4 { margin: 0 6px;}

.l5 { margin: 0 5px;}

.l6 { margin: 0 4px;}

.l7 { margin: 0 3px;}

.l8 { margin: 0 2px; height: 2px;}

.l9 { margin: 0 1px; height: 3px; }

.contenido1 {

height: auto;

padding: 15px;

}

-->

Ahora para formar la caja en un Elmento de HTML de Blogger, el MAIN, por ejemplo, es decir, el cuerpo donde van incluídas las entradas del BLOG, se introduce después del <DIV MAIN>:

<!--

<div id="caja1">

<div class="redondeado1 l1"></div>

<div class="redondeado1 l2"></div>

<div class="redondeado1 l3"></div>

<div class="redondeado1 l4"></div>

<div class="redondeado1 l5"></div>

<div class="redondeado1 l6"></div>

<div class="redondeado1 l7"></div>

<div class="redondeado1 l8"></div>

<div class="redondeado1 l9"></div>

<div class="redondeado1 contenido1">

AQUÍ IRIAN LAS SECCIONES DEL MAIN, DESDE EL b:section hasta el /b:section.

</div>

<div class="redondeado1 l9"></div>

<div class="redondeado1 l8"></div>

<div class="redondeado1 l7"></div>

<div class="redondeado1 l6"></div>

<div class="redondeado1 l5"></div>

<div class="redondeado1 l4"></div>

<div class="redondeado1 l3"></div>

<div class="redondeado1 l2"></div>

<div class="redondeado1 l1"></div>

</div>

-->

Puede parecer algo laborioso pero es muy sencillo en realidad de implementar en BLOGGER, este sistema de BORDES REDONDEADOS o ESQUINAS REDONDEADAS, sin necesidad de tener que andar bajando imagenes de fondo con esquinas redondeadas desde alojadores de imágenes. Otra forma de hacerlo por el método de bajar fotos o imágenes de esquinas redondeadas para superponerlas sobre las esquinas rectas, se describe en otro artículo de los que aparecen en:

Artículos interesantes para blogueros

En esos artículos, hay uno donde se trata el tema de las esquinas redondeadas y como la instrucción border radius ya es interpretada por el 75% de los navegadores de los internautas en 2012, que son Chrome o IE9. Para los interesados en el tema, les recomiendo ver ese artículo entre los temas para blogueros citados anteriormente.


NOTA: Los símbolos <!-- y --> se deben suprimir al introducir los códigos en la sección de HTML de DISEÑO de BLOGGER. Están puestos aquí para que el procesador de textos no interprete los códigos CSS y lo lea como texto. Y en cada caso, se cambiaría el código de COLOR DE LA CAJA así como el ancho de la caja.