Tutoriales Sobre Blogger: Añadir caja de Notificación con Pestaña de Cierre

En este tutorial veremos como Añadir una caja de Notificación con pestaña de Cierre para Blogger. Esta caja de Notificaciones podemos utilizarla como mensajes a sus lectores
como avisando que por algunos días el administrador no va estar presente contestando los comentarios o alguna informacion que ustedes quieran

Ante veremos una demostración:

Demostración

Comencemos

• Paso 1: Vamos a Blogger>>Diseño>>Añadir un gadget>>HTML/Javascript.
• Paso 2: Justo dentro del Gadget agregaremos el siguiente código HTML.

<script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#makingdifferent_widget2012").animate({left:"+=10px"}).animate({left:"-5000px"});
});
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script><style>
#makingdifferent_widget2012{
font-family: "Consolas", "Courier New", Courier, mono, serif;
border: 1px solid;
margin: 10px 0px;
padding:15px 15px 15px 50px;
background-repeat: no-repeat;
background-position: 5px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpi8nCov1PjSUWUoMTObbnKTpoyk-_ZzD9IM1ZuAz8_jV91oinzTWVVieDiqAyG3RFA8uFUG4N6qVyMnPNkb5IcYYPWly-O5u-yiKvqh9LPJ26lsEkSnzFofDLvy9yMO04cPjw1sBMr0NZ/s1600/icon-info.png');
}
</style>
<div id="makingdifferent_widget2012">
<a class="close"  href="#close" style='position:absolute;right:0px;top:0px;margin-right:-1px;margin-top:-1px;'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiob4G-dEiqUGggD7-Ke8xbRMejZkEhMWhtae2ByFykREjyHjqwDc_hLfPUR9Zj1udg3nqqzhWHNnkANXFVBP-ylPwDGcIAEc7GLrao37iVUPaEs4tEX3-1BamaESBHxg4lpDAjjv-X2U4B/s1600/popover-close-button.gif" /></a>Por motivos personales el administrador no esta en linea por unos Días. La caja de Comentarios permanecerá cerrada hasta la vuelta del Administrador. Sepan entender
</div>

• Paso 3: Guardamos nuestro gadget

Ya estaríamos disfrutando de nuestra caja de Notificaciones con pestaña de Cierre

Nota:- Lo único queda por hacer es cambiar el mensaje que vamos a mostrar en Azul y podemos cambiar las imágenes cambiando las URL en OJO