L
lifecastro
Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
les traigo una ventana de notificación bastante atractiva, usa CSS y JAVASCRIPT y lo mejor de todo es que no aparece hasta que no ha cargado tu sitio completamente, el color por defecto es naranja pero con un poco de programación por parte de ustedes pueden cambiar el css y modificarlo.
La instalacion en sus bloggers es sencilla, el primer paso es: ir a Plantilla --> Editar HTML --> presionar control+f y buscar </head> y antes de esto pegar el siguiente codigo:
Insertar CODE, HTML o PHP:
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/recursosbit/component.css?attredirects=0&d=1" />El segundo paso es buscar </body> y antes de esto pegar el siguiente codigo:
Insertar CODE, HTML o PHP:
<!-- Ventana notidicacion -->
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Notificacion</h3>
<div>
<p>En esta ventana podras:</p>
<ul>
<li><strong>Leer:</strong> Dar una noticias importante a tus lectores.</li>
<li><strong>Mostrar:</strong> Una imagen o cualquier tipo de elementos.</li>
<li><strong>Cerrar:</strong> clickear el boton cerrarme y desparecer la ventana.</li>
</ul>
<button class="cerrar">Cerrarme!</button>
</div>
</div>
</div>
<!-- /Ventana notidicacion -->
<div class="md-trigger" data-modal="modal-1"></div>
<div class="md-overlay"></div><!-- el elemento de superposición -->
<!-- classie.js -->
<script src="https://sites.google.com/site/recursosbit/classie.js?attredirects=0&d=1"></script>
<script src="https://sites.google.com/site/recursosbit/modalEffects.js?attredirects=0&d=1"></script>Para poner su contenido en la notificacion solo deben cambiar lo que esta dentro de la etiqueta <div class="md-content"> ejemplo:
Insertar CODE, HTML o PHP:
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Titulo de Notifiacion</h3>
<div>
y aca colocan todo lo que quieran dentro de la notificacion
<button class="cerrar">Cerrarme!</button>
</div>
</div>
</div>El tercer paso es guardar la plantilla, y por ultimo disfrutar de su notificación.
Debo comentarles que esta notificación tiene mucha utilidad, pueden colocar desde un simple texto hasta los botones de tus redes sociales, imagenes, flash o cualquier otro tipo de elementos, si te ha servido este tutorial no dudes compartirlo y agradecer con un comentario.
Fuente: Ventana de Notificacion para blogger, con Modal Efectos ~ BitCreativo - Tu Imaginación es Nuestra Realidad