Poner Diferentes tipos de Mensajes con CSS y jQuery en el Blog

En el blog CSS.Dzone nos muestran barios tipos de cuadros de mensaje creados con CSS, y gracias a un tutorial de Webintenta podemos añadirle efecto con jQuery. Dicho efecto consiste en que aparece la caja de mensaje y tras unos segundos la caja parpadea y desaparece. Puedes verlo funcionando en mi blog de pruebas.

Sin duda alguna es un efecto muy interesante, hoy veremos cómo podemos utilizarlo en nuestro blog de blogger. Si quieres utilizar los iconos de este ejemplo puedes bajartelo de "Knob Buttons Toolbar icons"

Empecemos primero tenemos que tener la librería jQuery versión 1.2.6.js, es posible que ya la tengas en tu plantilla, y si no la tienes copia y pega el siguiente código justo antes de </head>:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jquery-1.2.6.js' type='text/javascript'/>

Ahora añadiremos el efecto, copia y pega este otro código justo debajo del código que acabas de pegar:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/Desvanecer.js' type='text/javascript'/>

Más abajo veremos los códigos de cada mensaje, si haces click y lo eXpandes verás 2 códigos el código CSS para darle estilo que lo tienes que pegar en tu plantilla antes de ]]></b:skin>. El código HTML lo puedes pegar en un Elemento HTML en la sidebar del blog o en una entrada.

[+/-] Ver / Ocultar Códigos de mensaje de Información

Código CSS

.info{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('url-de-tu-imagen');
}

Código HTML

<div class="info mensajes">Aquí tu mensaje</div>

[+/-] Ver / Ocultar Códigos de mensaje de Exito

Código CSS

.exito{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.exito {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('url-de-tu-imagen');
}

Código HTML

<div class="exito mensajes">Aquí tu mensaje</div>

[+/-] Ver / Ocultar Códigos de mensaje de Alerta

Código CSS

.alerta{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.alerta {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('url-de-tu-imagen');
}
Código HTML

<div class="alerta mensajes">Aquí tu mensaje</div>

[+/-] Ver / Ocultar Códigos de mensaje de Error

Código CSS

.error{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('url-de-tu-imagen');
}
Código HTML

<div class="error mensajes">Aquí tu mensaje</div>

Podemos configurar el color de los mensajes en el código CSS. También podemos cambiar el tiempo que durará a la vista el mensaje, así como la velocidad del parpadeo antes de desaparecer.

Para que desaparezca en este ejemplo le he puesto 5 segundos. Si tú quieres configurarlo a más segundo tienes que bajarte el script y cambia los paremtros en la variable fadeOut(500);}, 5000) .

Descargar Script