Header Ads

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:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

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.



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.







No hay comentarios