Ventana de Notificacion para blogger, con Modal Efectos

Ahora es el turno de ayudarlos con sus bloggers, esta ves 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:

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/recursosbit/component.css?attredirects=0&amp;d=1" />

El segundo paso es buscar </body> y antes de esto pegar el siguiente codigo:

<!-- 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:

<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.

Compartelo! Be Social♥

Unknown

Diseñador gráfico y creativo, desarrollador de sitios web y un futuro iluminatis, blogger en tiempos libres y me encanta compartir conocimientos con los demas. José Castro en Google+