Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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:



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('http://3.bp.blogspot.com/-zrDRODUJ1fM/T66Pl4ZSPwI/AAAAAAAADK0/NnAuYxn2OBY/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="http://1.bp.blogspot.com/-xjVGllNNS5Q/T66Pa1LuFZI/AAAAAAAADKs/8Nf9hrNZGpA/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 
- - 1 Comentarios
Tag

Comentarios (1)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar