Tutorial: Pop up minimalista con temporizador para tu blog en blogger

  • Autor Autor merusa
  • Fecha de inicio Fecha de inicio

merusa

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Les comparto esta buena herramienta para blogger, un pop up con estilo minimalista muy atractivo, ademas cuenta con temporizador para que tu decidas cuanto tiempo se mostrara el pop.
como siempre les comparto primero la imagen para que vean como quedara su blog y luego el tutorial de instalacion.

Inicio del tutorial de intalacion.
(Tratare de explicarlo lo mejor posible para que aun con 0% de conocimiento puedas hacerlo)🙂:welcoming:


Pasos 1
Entras a tu blog/cic en diseño/clic en añadir un gadget/clic en HTML Javascript.
Paso 2
Descarga el codigo HTML que necesitas ubicado al final del post.

Paso 3
Copia y pega el codigo en la ventana que se te desplego al dar clic en HTML Javascript
Paso 4
Modifica el nombre del titulo y URl por el de tu pagina en el codigo y da aceptar.

Si aun no puedes intalarlo te comparto el tuturial con imagenes.





Si quieren un tutorial para modificar el tiempo que se mostrara el pop up; el color y estilo de los botones dejenlo en los comentarios.
Espero sirva!!
Suerte🙂
 

Adjuntos

Última edición:
Muchas gracias [MENTION=123868]merusa[/MENTION] por el tiempo que te tomas en hacer este tutorial 🙂
 
Buen aporte amigo, lo pondré una web mía:encouragement:
 
Gracñias, no tienes un Pop up de newsletter que puedas aportar.
 
Cambien:
HTML: 
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){ 
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'https://www.facebook.com/Viralesdeinternet/',
closeable: true });
});
//]]>
</script>
por
HTML: 
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){ 
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'ACA_FANPAGE_URL',
closeable: true,
message: "<center><a href='ACA_FANPAGE_URL' target='_blank'><img src='https://softarea.googlecode.com/files/facebook-pic.png' border='0'/></a></center>",
 });
});
//]]>
</script>
Esto evita que se agregue una fanpage que no es nuestra al lightbox...
Y aca les dejo el codigo JS limpio (sin agregados): [JavaScript] // Copyrights 2012. All rights reserved by www.softarea.in function createWait( - Pastebin.com
 
Curiosamente a mi no me sale nada del POP, he modificado la parte que dice [MENTION=9679]cicklow[/MENTION] pero nada... lo hago desde modo incógnito.
 
carlosjulian dijo:
Curiosamente a mi no me sale nada del POP, he modificado la parte que dice [MENTION=9679]cicklow[/MENTION] pero nada... lo hago desde modo incógnito.
Hacer clic para expandir...

define no me sale nada... osea no aparece el pop? o ke?
 
carlosjulian dijo:
Sii en efecto. No logro ver nada del pop

Enviado desde mi E2306 mediante Tapatalk
Hacer clic para expandir...

es raro... yo lo subi funcional... cuando editaste algo del codigo no abras sacado algo... fijate en la consola a ver que error te da.. (ctrl+shift+j)
 
[MENTION=9679]cicklow[/MENTION] así quedó el código, y los errores que me marca según la consola son de una llave, lo de CDATE.


Insertar CODE, HTML o PHP: 
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='El Bloguero'
//]]>
</script>
<style type='text/css'>
#fblikepop{background-color:#fff; position:absolute; /* hack for IE 6*/width:450px;border:5px solid #e4e4e4;z-index:200;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:&quot;Open Sans&quot;,verdana,arial,georgia;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#3a60a4 none repeat scroll 0 0;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Open Sans&quot;,verdana,arial,georgia;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #e4e4e4;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#3a60a4 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:9px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}
</style>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'></script>
<script src='http://softarea.googlecode.com/files/fb-like-popup.js' type='text/javascript'></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){ 
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'MI-FANPAGE',
closeable: true,
message: "<center><a href='MI-FANPAGE' target='_blank'><img src='https://softarea.googlecode.com/files/facebook-pic.png' border='0'/></a></center>",
});
});
//]]>
</script>
<div id='fbtpdiv'/></div>
 
aplicandolo
 
Muy buen aporte :encouragement:
 
Gracias por compartir, lo voy a ocupar...
 
merusa cicklow excelente funciona al 100% :encouragement:
 
Excelente, a la espera del siguiente tutorial.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Menú minimalista para Blogger
Respuestas
3
Visitas
407
val
V
M
  • Cerrado
[PLANTILLA GRATIS] Cristalino - Plantilla minimalista para blogger
Respuestas
18
Visitas
1K
memeringo
M
K
Tutorial: Cómo agregar una caja Pop-Up de Me Gusta de Facebook en Blogger
Respuestas
13
Visitas
4K
foxam
F
W
Tutorial: Pop-up caja de me gusta facebook para blogger
Respuestas
14
Visitas
3K
Kyouya TL
Buscando un tema minimalista para integrar un blog y añadir texto por columnas en Prestashop
Respuestas
3
Visitas
1K
bahandur
Menú
Acceder
Registro