Da clic en la imagen para ver un ejemplo. |
AGREGAR EL POP UP
- Empezamos, para eso nos iremos a nuestra parte de Plantilla y Editar HTML... Damos un clic dentro del código y presionamos ctrl + f para que se nos abra el cuadro de búsqueda y sea mas fácil encontrar la etiqueta de cierre del head así que copiamos y pegamos esto: </head> y antes del cierre pega este código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.css" rel="stylesheet"></link> <script src="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); jQuery.colorbox({width:"400px", inline:true, href:"#facebook-TB"}); } }); </script>
<link href="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.css" rel="stylesheet"></link> <script src="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); jQuery.colorbox({width:"400px", inline:true, href:"#facebook-TB"}); } }); </script>
DOS COSAS IMPORTANTES
- El texto o código resaltado en color azul es jquery si ya lo tienes en tu plantilla omite esa parte del código.
- El cero en color rojo es el numero de días que tardara en reaparecer la caja, yo lo puse en cero pero les recomiendo que lo cambien por el numero 1 por que es algo molesto que el lector este a cada rato cerrando dicha ventana, por que cada ves que cambien de pagina o actualicen el blog la caja estará apareciendo una y otra ves.
Entonces una vez hechos estos cambiamos nos iremos a Diseño y agregamos un nuevo gadget de tipo Html/JavaScript y copiamos y pegamos este código.
<div style="display: none;"><div id="facebook-TB" style="background: #fff; padding: 10px;"><h3 class="box-title">Sigueme en Facebook</h3><center><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTodoParaTuPcTutoriales2010&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" style="border: none; height: 258px; overflow: hidden; width: 300px;"></iframe></center><div align="left"><span style="font-size: x-small;">tutoriales2010.blogspot.mx</span></div></div></div>
Antes de guardar solo debes cambiar la parte subrayada por el nombre de usuario correspondiente. Y listo!
Ten encuenta que:
si tu pagina no tiene url personalizada entonces debes agregar el ID
http://www.facebook.com/pages/nombrepagina/1243535343
Cualquier duda solo déjame un comentario.
0 comentarios:
Publicar un comentario