Cartel de aviso flotante


Hoy veremos cómo agregar a nuestro blog un cartel de aviso flotante, con botón de cerrar, que puede sernos de mucha utilidad cuando queremos comunicar algo o simplemente para dar la bienvenida a nuestro blog e invitar a nuestros lectores a suscribirse.

El cartel, lo pueden ver funcionando en mi blog de pruebas. Aquí les dejo una imagen:


Bien, entonces empecemos:

1.§ Vamos a Diseño - Edición de HTML y buscamos ]]></b:skin>.

2.§ Encima pegaremos los estilos:
#aviso {
background-color: #e2e2e2; /* color del fondo */
border: 3px solid #CA185F; /* color del borde */
color: #000000; /* color del texto */
font-size: 14px; /* tamaño de fuente */
font-family: Arial; /* tipo de fuente */
text-align: center;
padding: 5px;
position: fixed;
top: 20px;
right: 65%;
width: 250px;
}

Para cambiar la posición del cartel, debemos de cambiar los valores top y right. Si deseamos podemos agregar más estilos como sombras, bordes redondeados, etc.

3.§ Ahora buscaremos </body> y encima de éste pegaremos lo siguiente:

<div id='aviso'>
<div align='right' style='margin-bottom:-15px;'><a href='javascript:void(0);' onclick='document.getElementById(&apos;aviso&apos;).style.display=&apos;none&apos;;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXJbQA-oVRJj6KCTusSjx9h_ptM4Z3z3_KXdMfHeePHWseRji82Qeb294-HT_hiVR3LCJ7qjO3cNOJ1hegPF1EOJ33OpdrV_BgkCgcf1VH05AB8qZsf1CBGoc2cySlwt5A2M7yrTlAtM/s1600/Close.png'/>
</a></div>
<p> Aquí pegar el contenido del aviso.</p>
</div>

Lo resaltado en negrita es la URL de la imagen del botón; podemos reemplazarla por otra. En donde dice Aquí pegar el contenido del aviso, colocaremos el contenido del cartel. En el ejemplo, puse un texto de bienvenida y dos botones, uno de Twitter y otro de Facebook.

4.§ Una vez terminado esto, damos click en Guardar y listo.

Ver demo

15 opinaron:

Anónimo

Muy Bueno. Gracias Jessica :D

Responder
Unknown

Jessi, te dejo besitos :P

Responder
Booquer

Hola Jéssica,yo no puedo ponerlo porque me da el siguiente error:

Mensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".

Una ayudita??? :(( Y gracias por todo ;)

Responder
Booquer

Ya está Jéssica! Ya lo conseguí...XD
Aunque una vez que guardé la plantilla y comprobé el código,los caracteres cambiaron solos... :S
Pero funciona y queda perfecto!!!
Muchas gracias por el cartel :D

Responder
Jéssica YK

» Abraham:
Gracias a ti por la visita! Me alegra que el post te haya sido de utilidad.

S@lu2

Responder
Jéssica YK

» Graciela:
Besitos para ti también Graciela, amiga.

S@lu2

Responder
Jéssica YK

» Cubriera:
Me alegra que hayas podido solucionar el problema. Gracias por tu comentario y la visita!

S@lu2

Responder
Dark Heaven

me dice esto cuando hago eso que dijiste. Lo copié, para probar.

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".
:$

Responder
Brian

Yo quiero hacerlo, pero me aparce el siguiente error:
Error al analizar XML, línea 914, columna 113: Element type "a" must be followed by either attribute specifications, ">" or "/>".
Necesito ayuda, porfis :((

Responder
Jéssica YK

» Dark Heaven:
No puedo ver tu blog para ayudarte :(

» Brian:
En cuál de tus dos blogs quieres agregarlo.

S@lu2

Responder
Enzo Zapata

No sirve el codigo, el error que sale es:
Error al analizar XML, línea 1260, columna 113: Element type "a" must be followed by either attribute specifications, ">" or "/>".

Jéssica YK

» Enzo Zapata:
He modificado ligeramente el código, ahora sí debería funcionar en tu blog.
Si el problema persiste, me avisas para poder ayudarte .
S@lu2

Responder
PornoTube

hola jessica buenas tardes soy nuevo aqui en tu pagia y me ha encantado... me ha sido de utilidad este post... pero tengo un problemita..... que no puedo tenerlo centrado el aviso completo.... ya que le he agregado una imagine de 800x440px pero todo se va para el lado izquierdo y no se visualiza todo... por favor ayudame... gracias

Jéssica YK

» Musico-Free:
Para ayudarte necesitaría ver tu blog. Si puedes, pásame el link de tu blog.

En todo caso, podrías cambiar el valor del ancho fijado en los estilos del paso 2.§: cambia el valor del ancho (width) de 250px a 800px que es el ancho de tu imagen imagen.

Para cambiarlo a izquierda o derecha, arriba o abajo, cambia los valores de top y right. Dale en vista previa antes de guardar.

Si el problema persiste, no dudes en escribirme.

S@lu2

Responder
Unknown

:( não entendi

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio