Ventana de Aviso en el Blog

En nuestro Blog, muchas veces queremos dar avisos importantes a nuestros lectores, por diversos motivos, si bien podemos hacer estos avisos por medio de Una entrada o un Gadget de texto, a mi parecer no los veo tan llamativos, asi que estuve pensando y genere una ventana de aviso con Css y un poco de Jquery, pueden ver el ejemplo al lado inferior izquierdo de este Blog, tienen un efecto de cerrado que le da un propiedad extra por si el lector no quiere verla.

Así que si quieres poner una ventana de aviso en tu Blog, en esta entrada explicare detalladamente como debemos hacerlo y como podemos editarlo a nuestro Gusto.

Ventana de Aviso en el Blog:

Para empezar a crear nuestra ventana de aviso, primero debemos contar con la librería Jquery enlazada a nuestro Blog, usamos Jquery para darle el efecto de cerrado, así que si no sabes como añadir esta librería te recomiendo que visites esta entrada: Librería Jquery en Blogger. El enlace a la libreria es este:

Así que si aun no lo tienes en tu blog, pegalo entre las etiquetas <head> y </head>.

1) Añade un Gagdget HTML/JavaScript:

Para empezar añadiremos un gadget HTML/JavaScript, de la Opción diseño de Nuestro Blog, una ves añadido el Gadget colocamos el siguiente código en el Gadget:

2) Ahora daremos estilo CSS a la ventana:

El estilo que le daremos ene esta ocasion a la ventana de aviso es el mismo que tenemos en este Blog, pero puede ser modificado a gusto, en el código que daré habrá comentarios sobre lo que hace cada atributo asignado con respecto a la ventana d aviso.

#ventana-mensaje
{

position:fixed; /* posiscion deslizante*/
   left:20px;      /* alineacion a la izquierda*/   
   bottom:0;       /* alineacion a la inferior*/
   width:300px;    /* ancho de la ventana*/
  -webkit-border-radius: 3px; /* Borde redondeado en Chrome*/
  -moz-border-radius: 3px;    /* Borde redondeado en mozilla*/
  -o-border-radius: 3px;      /* Borde redondeado en Opera*/
   border-radius: 3px;        /* Borde redondeado*/
   box-shadow: 2px 2px 2px 2px #7EB4FC;         /*Efecto sombreado*/
   -webkit-box-shadow: 2px 2px 2px 2px #7EB4FC; /*Efecto sombreado en Chrome*/
   -moz-box-shadow: 2px 2px 2px 2px #7EB4FC;    /*Efecto sombreado en Mozilla*/
   -o-box-shadow: 2px 2px 2px 2px #7EB4FC;      /*Efecto sombreado en Opera*/ 
   background:white;                            /*Color de Fondo*/

}
#titulo-mensaje
{
 /*Estilos para el titulo*/
font:bold 26px "ar blanca"; /*Texto en negrita, tamaño, tipo de letra*/
color:#7EB4FC;              /*Color de la letra*/
text-align:center;          /*centrar titulo*/

}
.cerrar
{
  font-size:16px;   /*Tamaño de la X*/
  float:right;      /*Alineacion derecha*/
  padding-right:5px;  /*Margen interior hacia la derecha*/
  cursor: pointer;    /*Cursor del mouse-seleccionando*/ 
}

#contenido-mensaje
{
text-align:justify; /*Texto justificado*/
padding: 8px;       /*Margen interno*/ 
font-weight:bold;   /*Texto en negrita*/ 
}

Solo copia el código CSS en la Opción añadir CSS de la edición plantilla Personalizada de Blogger.

Una ves echo todo esto ya tendremos una ventana de aviso en nuestro Blog, así que ya pueden darle diferentes usos, editarlo a su gusto y combinarlo con su Blog.

Cualquier duda o Aporte hacerlo por Comentarios. Gracias por su Tiempo.

Ventana de Aviso en el Blog