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

merusa · 29 Dic 2015

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🙂

Carlos Arreola · 29 Dic 2015

Muchas gracias [MENTION=123868]merusa[/MENTION] por el tiempo que te tomas en hacer este tutorial 🙂

Ramsi · 29 Dic 2015

Buen aporte amigo, lo pondré una web mía:encouragement:

enghels · 29 Dic 2015

Gracñias, no tienes un Pop up de newsletter que puedas aportar.

Cicklow · 29 Dic 2015

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

carlosjulian · 29 Dic 2015

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.

Cicklow · 29 Dic 2015

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.

define no me sale nada... osea no aparece el pop? o ke?

carlosjulian · 29 Dic 2015

cicklow dijo:
define no me sale nada... osea no aparece el pop? o ke?

Sii en efecto. No logro ver nada del pop

Enviado desde mi E2306 mediante Tapatalk

Cicklow · 29 Dic 2015

carlosjulian dijo:
Sii en efecto. No logro ver nada del pop

Enviado desde mi E2306 mediante Tapatalk

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)

carlosjulian · 30 Dic 2015

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

yepe · 4 Ene 2016

aplicandolo

JordanAlvarez · 6 Ene 2016

Muy buen aporte :encouragement:

bersainrodas · 6 Ene 2016

Gracias por compartir, lo voy a ocupar...

dack · 13 Feb 2016

merusa cicklow excelente funciona al 100% :encouragement:

alonsoab · 13 Feb 2016

Excelente, a la espera del siguiente tutorial.

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

merusa

Adjuntos

Carlos Arreola

Ramsi

enghels

Cicklow

carlosjulian

Cicklow

carlosjulian

Cicklow

carlosjulian

yepe

JordanAlvarez

bersainrodas

dack

alonsoab

Temas similares