miércoles, 22 de agosto de 2012

TEXTOS EN CAJAS REDONDEADAS

Este es un texto encerrado en una caja con esquinas redondas. ¿Te gustaria poder contar con este recurso siempre que quieras?.

Pega este código en la plantilla de tu blog justo antes de
]]></b:skin>:


#caja {
width: 400px; /*ANCHO TOTAL DE LA CAJA*/
color: #990000; /*COLOR DEL TEXTO*/
text-align:center;
margin:0px auto;
}
.redondeado {
height: 1px;
overflow: hidden;
background-color: #cccccc; /* COLOR DE LA CAJA */
}
/* LAS LINEAS PARA FORMAR LA PARTE REDONDEADA */
.r1 { margin: 0 12px;}
.r2 { margin: 0 9px;}
.r3 { margin: 0 7px;}
.r4 { margin: 0 6px;}
.r5 { margin: 0 5px;}
.r6 { margin: 0 4px;}
.r7 { margin: 0 3px;}
.r8 { margin: 0 2px; height: 2px;}
.r9 { margin: 0 1px; height: 3px; }
.contenido {
height: auto;
padding: 0 15px;
}

Luego allí donde queráis colocar esta caja redondeada de texto colocáis este código HTML:

<div id="caja">
<div class="redondeado r1"></div>
<div class="redondeado r2"></div>
<div class="redondeado r3"></div>
<div class="redondeado r4"></div>
<div class="redondeado r5"></div>
<div class="redondeado r6"></div>
<div class="redondeado r7"></div>
<div class="redondeado r8"></div>
<div class="redondeado r9"></div>
<div class="redondeado contenido">Este es un texto encerrado en una caja con esquinas redondas. No importa el tamaño del texto, porque la parte central conserva las dimensiones necesarias.</div>
<div class="redondeado r9"></div>
<div class="redondeado r8"></div>
<div class="redondeado r7"></div>
<div class="redondeado r6"></div>
<div class="redondeado r5"></div>
<div class="redondeado r4"></div>
<div class="redondeado r3"></div>
<div class="redondeado r2"></div>
<div class="redondeado r1"></div>
</div>
Debéis tener en cuenta que tanto el nombre caja"#caja" como la definición "redondeado", pueden ser variados. En algunos casos podría no funcionar este truco, simplemente por que en otro lugar de tu blog ya han sido utilizados. Han de ser variados en ambos códigos no lo olvidéis.

No quiero terminar, sin antes nombrar la fuente que me ha proporcionado este genial truco, que he decido reflejar íntegramente en este blog, por las aclaraciones que sobre el realizo.
Vaya pues mi agradecimiento a:

lunes, 20 de agosto de 2012

Un Título de Entrada diferente.

¿Os gusta esta manera de presentar los títulos de vuestras entradas? El milagro lo opera como no podía ser de otra manera, el código CSS, los recurrentes stylos. Es sencillo y debe colocarse justo antes de esta instrucción(]]></b:skin>)en el html de vuestro blog:

h3.post-title {
display:block;
overflow:hidden;
width: 85%; 
height: 2em;
margin: 5px 0 0 -28px
padding:2px 4px 4px 40px;
background: #333;
border: 1px solid #555;
border-radius:10px 10px 0 0;(
line-height:1.10em;
}
.trih3 {display: block;
z-index: -1;
height: 0px;
width: 0px;
margin: -12px 0 0 -40px;
border: 12px solid transparent;
border-right: 12px solid #222;
}



POSIBLES VARIACIONES
width: 85%;   (variando este valor conseguiréis alargar la tira) 
( "         "    "    el largo del rectángulo)
background: #333;(este valor corresponde al color del fondo)
border-radius:10px 10px 0 0;(y estos valores mejor hacéis pruebas jejeje, bueno una pista: la redondeces de la tira)

Todo esto no serviría para nada si no añadís en vuestra plantilla ya dentro de expandir plantilla de artilugios, una capa vacía de lo creado: <div class='trih3'/> ¿donde? debéis buscar post.title y .... el final del truquito acudir allí de donde yo vengo:

http://www.oloblogger.com/2012/07/titulo-con-forma-de-banda-superpuesta.html



martes, 7 de agosto de 2012

¿Quieres saber cuántos y de dónde son tus visitantes?

Un espacio cómodo y fácil donde encontrarás distintos modelos de contadores para colocar en tu blog y totalmente gratis.