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