NEWSLETTER POUP-UP CAPTURADOR DE E-MAILS
Fórum Loja Integrada - Código Aberto. :: CÓDIGOS TESTADOS E COM MANUAL DE IMPLENTAÇÃO :: CÓDIGOS TESTADOS E COM MANUAL DE IMPLENTAÇÃO
Página 1 de 1
NEWSLETTER POUP-UP CAPTURADOR DE E-MAILS
Local Publicação: Cabeçalho.
Página publicação: Página inicial - Home
Tipo: Cascade Style Sheet (CSS).
Conteúdo:
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask { position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
#boxes .window { position:absolute;left:0;top:0;width:440px;height:200px;display:none;z-index:9999;padding:20px;}
#boxes #dialog { width:630px; height:50%;padding:0;}
#dialog .d-header { position:relative;top:60%;width:350px; height:90px;}
#dialog .d-header input {color: #fff;}
#dialog .d-blank { float:left;background:url(login-blank.png) no-repeat 0 0 transparent; width:267px; height:53px;}
#dialog .d-login { width:270px; height:40px;position:relative;top:100px;left:335px;text-align:center;}
.close{display:block; text-align:right; background:url(http://cdn.awsli.com.br/75/75839/arquivos/btn-close.png); width:36px; height:37px; display:block; position:absolute; top:-15px; right:-15px;}
-----------------------------------------
Local Publicação: Rodapé.
Página publicação: Página inicial - Home
Tipo: HTML.
<div id="boxes">
<div id="dialog" class="window" align="center">
<br />
<div class="d-header">
<div class="row-fluid">
<a href="#" class="close"></a>
<div class="span">
<div class="componente newsletter borda-principal">
<div class="interno">
<span class="titulo cor-secundaria">
<i class="icon-envelope-alt"></i>Receba Nossas Novidades
</span>
<div class="interno-conteudo">
<p class="texto-newsletter newsletter-cadastro">Cadastre-se e receba um cupom de 10% de desconto na hora de finalizar sua compra.</p>
<div class="newsletter-cadastro input-conteiner">
<span class="add-on"><i class="icon-envelope"></i></span><input type="text" class="span2" id="inputIcon" name="email" placeholder="Digite seu email" />
<button class="botao botao-input fundo-principal icon-chevron-right newsletter-assinar" data-action="http://www.apboutique.lojaintegrada.com.br/newsletter/assinar/"></button>
</div>
<div class="newsletter-confirmacao hide">
<i class="icon-ok icon-3x"></i></br>
<span>MUITO OBRIGADO(A),INSIRA O SEGUINTE CÓDIGO NA HORA DE FINALIZAR SUA COMPRA E GANHE 10% DE DESCONTO.</br><span class="titulo cor-secundaria">NEWSAP10</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<div id="mask"></div></div>
-------------------------------------------
Local Publicação: Cabeçalho.
Página publicação: Página inicial - Home
Tipo: HTML. <<É HTML MESMO, NÃO JAVA SCRIPT>>
<script type="text/javascript">
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(document).ready(function () {
var box = getCookie('janela_modal');
if (box == null) {
launchWindow('#dialog');
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
setCookie('janela_modal', 'visitou', 1);
}
});
function launchWindow(id) {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
$('#mask').fadeIn(0);
$('#mask').fadeTo("fast", 0.;
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height());
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(0);
}
</script>
-------------------------
Lembrando que estes códigos acima são para alteração e design do Poup-up capturador de e-mails, logo será preciso outro css para alterar o design da newsletter que faz parte do layout da página, então para alterala e deixa-la com a cara e design do poup-up use o seguinte código:
Local Publicação : Editar CSS
/* Newsletter box */
.newsletter{background: #fff; border: 4px solid #000000; border-radius: 7px;}
.newsletter .titulo{border-bottom: 3px solid #000000; font-size: 16px; color: #000000; padding-bottom: 10px;}
.newsletter .titulo i:before{content: ''; width: 35px; height: 28px; background: url(//cdn.awsli.com.br/128/128258/arquivos/icones_loja23.png) no-repeat -90px -60px;}
.banner .newsletter .titulo{padding: 10px 0; margin: 0 15px;}
.newsletter .texto-newsletter{font-size: 13px;}
.newsletter .input-conteiner{background: #000000; padding: 5px; border-radius: 25px;}
.newsletter input{background: none; border: 0; box-shadow: none; font-size: 12px;}
.newsletter .botao{background: none; border: 0;padding: 0;top: 3px;right: 5px;}
.newsletter .botao:before{content: ''; width: 30px; height: 30px; background: url(//cdn.awsli.com.br/128/128258/arquivos/icones_loja22.png) no-repeat -60px -90px;}
-------------------------------
"ESTES CÓDIGOS SÃO DE AUTORIA DE VINICIUS DIEGO, MEMBRO DO GRUPO LOJA INTEGRADA - CÓDIGO ABERTO FEITO PARA LOJISTAS"
PORTANTO QUALQUER DÚVIDA EM RELAÇÃO AOS CÓDIGOS PROCUREM A ELE.
POST FEITO POR: RAFAEL PERES - MEMBRO DO GRUPO LOJA INTEGRADA - CÓDIGO ABERTO FEITO PARA LOJISTAS
Página publicação: Página inicial - Home
Tipo: Cascade Style Sheet (CSS).
Conteúdo:
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask { position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
#boxes .window { position:absolute;left:0;top:0;width:440px;height:200px;display:none;z-index:9999;padding:20px;}
#boxes #dialog { width:630px; height:50%;padding:0;}
#dialog .d-header { position:relative;top:60%;width:350px; height:90px;}
#dialog .d-header input {color: #fff;}
#dialog .d-blank { float:left;background:url(login-blank.png) no-repeat 0 0 transparent; width:267px; height:53px;}
#dialog .d-login { width:270px; height:40px;position:relative;top:100px;left:335px;text-align:center;}
.close{display:block; text-align:right; background:url(http://cdn.awsli.com.br/75/75839/arquivos/btn-close.png); width:36px; height:37px; display:block; position:absolute; top:-15px; right:-15px;}
-----------------------------------------
Local Publicação: Rodapé.
Página publicação: Página inicial - Home
Tipo: HTML.
<div id="boxes">
<div id="dialog" class="window" align="center">
<br />
<div class="d-header">
<div class="row-fluid">
<a href="#" class="close"></a>
<div class="span">
<div class="componente newsletter borda-principal">
<div class="interno">
<span class="titulo cor-secundaria">
<i class="icon-envelope-alt"></i>Receba Nossas Novidades
</span>
<div class="interno-conteudo">
<p class="texto-newsletter newsletter-cadastro">Cadastre-se e receba um cupom de 10% de desconto na hora de finalizar sua compra.</p>
<div class="newsletter-cadastro input-conteiner">
<span class="add-on"><i class="icon-envelope"></i></span><input type="text" class="span2" id="inputIcon" name="email" placeholder="Digite seu email" />
<button class="botao botao-input fundo-principal icon-chevron-right newsletter-assinar" data-action="http://www.apboutique.lojaintegrada.com.br/newsletter/assinar/"></button>
</div>
<div class="newsletter-confirmacao hide">
<i class="icon-ok icon-3x"></i></br>
<span>MUITO OBRIGADO(A),INSIRA O SEGUINTE CÓDIGO NA HORA DE FINALIZAR SUA COMPRA E GANHE 10% DE DESCONTO.</br><span class="titulo cor-secundaria">NEWSAP10</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<div id="mask"></div></div>
-------------------------------------------
Local Publicação: Cabeçalho.
Página publicação: Página inicial - Home
Tipo: HTML. <<É HTML MESMO, NÃO JAVA SCRIPT>>
<script type="text/javascript">
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(document).ready(function () {
var box = getCookie('janela_modal');
if (box == null) {
launchWindow('#dialog');
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
setCookie('janela_modal', 'visitou', 1);
}
});
function launchWindow(id) {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
$('#mask').fadeIn(0);
$('#mask').fadeTo("fast", 0.;
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height());
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(0);
}
</script>
-------------------------
Lembrando que estes códigos acima são para alteração e design do Poup-up capturador de e-mails, logo será preciso outro css para alterar o design da newsletter que faz parte do layout da página, então para alterala e deixa-la com a cara e design do poup-up use o seguinte código:
Local Publicação : Editar CSS
/* Newsletter box */
.newsletter{background: #fff; border: 4px solid #000000; border-radius: 7px;}
.newsletter .titulo{border-bottom: 3px solid #000000; font-size: 16px; color: #000000; padding-bottom: 10px;}
.newsletter .titulo i:before{content: ''; width: 35px; height: 28px; background: url(//cdn.awsli.com.br/128/128258/arquivos/icones_loja23.png) no-repeat -90px -60px;}
.banner .newsletter .titulo{padding: 10px 0; margin: 0 15px;}
.newsletter .texto-newsletter{font-size: 13px;}
.newsletter .input-conteiner{background: #000000; padding: 5px; border-radius: 25px;}
.newsletter input{background: none; border: 0; box-shadow: none; font-size: 12px;}
.newsletter .botao{background: none; border: 0;padding: 0;top: 3px;right: 5px;}
.newsletter .botao:before{content: ''; width: 30px; height: 30px; background: url(//cdn.awsli.com.br/128/128258/arquivos/icones_loja22.png) no-repeat -60px -90px;}
-------------------------------
"ESTES CÓDIGOS SÃO DE AUTORIA DE VINICIUS DIEGO, MEMBRO DO GRUPO LOJA INTEGRADA - CÓDIGO ABERTO FEITO PARA LOJISTAS"
PORTANTO QUALQUER DÚVIDA EM RELAÇÃO AOS CÓDIGOS PROCUREM A ELE.
POST FEITO POR: RAFAEL PERES - MEMBRO DO GRUPO LOJA INTEGRADA - CÓDIGO ABERTO FEITO PARA LOJISTAS
Fórum Loja Integrada - Código Aberto. :: CÓDIGOS TESTADOS E COM MANUAL DE IMPLENTAÇÃO :: CÓDIGOS TESTADOS E COM MANUAL DE IMPLENTAÇÃO
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|