Propagganda

Este es un tutorial muy útil en esto de los blogs, muchas veces queremos destacar algo, dejar alguna nota especial, algún enlace de descarga y el blockquote no nos satisface, Pero esto es mas sencillo de lo que pensamos, ya verás.

Como insertarlo?

Necesitas tener dos cosas, inluir los iconos (van incluidos en la una carpeta, en el archivo descargable) en una carpeta llamada images en tu theme

e incluir el código mostrado abajo en el archivo style.css de tu theme y ya están listas las cajas de texto en CSS.

.corazon, .casa, .descarga, .autor, .feed, .lapiz, .herramienta, .alerta, .comentario, .candado, .libro  {
border: 1px solid #CCCCCC;
margin: 15px 24px 15px 10px;
padding:10px 10px 10px 50px;
background-position: 10px center;
}

.corazon {
color: #2E2D2D;
background: #DEF2FB url(images/corazon.png) 15px 15px  no-repeat;
}
.casa {
color: #2E2D2D;
background: #EFF8DF url(images/casa.png) 15px 15px  no-repeat;
}
.descarga {
color: #2E2D2D;
background: #FEF7D9 url(images/descarga.png) 15px 15px no-repeat;
}
.autor {
color: #2E2D2D;
background: #D0E0E3 url(images/autor.png) 15px 15px no-repeat;
}
.feed {
color:#2E2D2D;
background: #EFF8DF url(images/rss.png) 15px 15px no-repeat;
}
.lapiz {
color: #2E2D2D;
background: #E3EFE3 url(images/lapiz.png) 15px 15px no-repeat;
}
.herramienta {
color: #2E2D2D;
background: #F8E4C1 url(images/herramienta.png) 15px 15px no-repeat;
}
.alerta {
color: #2E2D2D;
background: #E8AFB2 url(images/alerta.png) 15px 15px no-repeat;
}
.comentario {
color: #2E2D2D;
background: #D2E3E8 url(images/comentario.png) 15px 15px no-repeat;
}
.candado {
color: #2E2D2D;
background: #FFDCDC url(images/candado.png) 15px 15px no-repeat;
}
.libro {
color: #2E2D2D;
background: #EFF8DF url(images/libro.png) 15px 15px no-repeat;
}

Como lo uso?

Para usarlo es sencillo, aca una muestra:

 <p class="corazon">Cajas de mensajes en CSS</sourcecode>
<p class="casa">Cajas de mensajes en CSS</p>
<p class="descarga">Cajas de mensajes en CSS</p>
<p class="autor">Cajas de mensajes en CSS</p>
<p class="feed">Cajas de mensajes en CSS</p>
<p class="lapiz">Cajas de mensajes en CSS</p>
<p class="herramienta">Cajas de mensajes en CSS</p>
<p class="alerta">Cajas de mensajes en CSS</p>
<p class="comentario">Cajas de mensajes en CSS</p>
<p class="candado">Cajas de mensajes en CSS</p>
<p class="libro">Cajas de mensajes en CSS</p>

Como se mira?

Ya en uso se ve de esta manera.

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Cajas de mensajes en CSS

Deseas verlo en acción?

Pues para que te des cuenta que bonito queda, aca te paso todo lo que necesitas, en un enlace de descarga, y sí, usando una caja de mensajes en CSS.

Descargar | 94.5kb