Mostrar notificaciones en el blog con efecto deslizante

SlideNote es un plugin de jQuery que nos permite mostrar notificaciones en el blog de forma deslizante tanto al mostrarse como al cerrarse el anuncio.

Estas notificaciones se muestran cuando se baja el scroll de la página y se pueden mostrar dentro de ellas cualquier tipo de estilos CSS, imágenes, enlaces o cualquier otra cosa. Puedes verlo funcionando en este blog de pruebas, al bajar la página aparecerá el anuncio del lado derecho.

El contenedor del aviso tiene un botón para cerrarse, pero también se oculta si subimos nuevamente con el scroll de la página.

Para colocarlo en tu blog sigue estos pasos:
Descarga este archivo, descomprímelo y súbelo a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>

<style type='text/css'>
.slidenote {
width: 500px; /* Ancho del anuncio */
height: 120px; /* Alto del anuncio */
background: #FBEC78; /* Color de fondo */
-moz-box-shadow: -0.2em -0.2em 0.7em #333;
-webkit-box-shadow: -0.2em -0.2em 0.7em #333;
padding: 1em;
}
.slidenote img { float: left; margin-left: -2.5em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
.slidenote-titulo {
color: #000; /* Color del título */
font-size:25px; /* Tamaño de la letra del título */
font-weight:bold;
margin-top: -5px;
}
.slidenote p {
color: #000; /* Color del texto */
font-size: 14px; /* Tamaño de la letra */
font-weight: bold;
}
</style>

Cambia donde se indica la URL del archivo que subiste previamente. Luego, y por último, pega antes de </body> esto:

<div class='slidenote' id='Note'>
<span class='slidenote-titulo'>Importante...!</span>
<p>Aquí va el texto de tu anuncio. Puedes incluir estilos, enlaces, imágenes, etc.</p>
</div>

<script type='text/javascript'>
$(&#39;#Note&#39;).slideNote({
corner: &#39;right&#39;,
where: 80,
});

$(&#39;#Note&#39;).slideNote({
url: &#39;ajax.html&#39;,
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmeq48c2nFTTH77G03PjpAPA2VLaWVnlsFKAnS1u9Fq9lkcUtgu_SeZKomPj2U16C2hh0x4vIcZ0cY0w7uSCfVd0Ax2t8NfYkQ5fA9tHzxbZUVH2cA3E34hV75EJ8RmFkV1Jz5IivBZrU/&#39;

});
</script>

En el primer código está señalado en color verde los estilos que podemos cambiar de la estructura del anuncio. Y en color azul se indica donde va el contenido del anuncio.

Como ves la instalación es muy sencilla, práctica, y sus usos pueden ser múltiples, ya sea para sugerir la suscripción al blog, para dar un aviso importante, para mostrar las redes sociales en las que pueden localizarnos, o simplemente para agregar un saludo a los lectores.