Olá Galerinha, hoje vim com um super mega hiper tutorial, eu, particularmente, achei esse tutorial fantástico, só passei umas 4 horas fazendo esse tutorial e essa código que vocês podem ver na demonstração na imagem acima. Publiquei há alguns dias um tutorial sobre janela modal (Como Inserir Uma Janela Modal de Assinar Feed e Seguir Blog), baseado nesse tutorial eu desenvolvi um tipo de PopUp Domination pra Blogger, o popup domination é uma box também MUITO pesada e que carrega várias imagens, eu criei uma box mais ou menos nesse estilo, que usa poucas imagens e com um design bem mais simples e moderno, e ainda com efeito Jquery, por isso o título “Espetacular”, realmente ficou muito bom, e satisfazendo o pedido de nosso leitores, eu fiz 4 versões para o mesmo código, tem a box com cookie, sem cookie, com cookie e que abre apenas na página inicial e sem cookie e que também só abre na página inicial, foi só colocar essa PopUp no nosso blog que surgiu várias pessoas pedindo o código ou para ensinar como adiciona, e então eu resolvi criar um tutorial, mas já estava em mente criar mesmo. recebemos muitos comentários pedindo para ensinar como fazer o widget dessas 4 formas, então estou à dispor de nosso leitores para inovar sempre, e a maior vantagem sobre o PopUp Domination é a leveza, essa box é muito leve, prática, simples, moderna e bonita e ainda possui o “Sprite” que carrega todas as bordas e fundos com apenas uma imagem, realmente estou muito impressionado com o o que fiz, hahaha. Veja a Demonstração da Box na Nossa Página de Testes: http://demo3.blogandocomfacilidade.com/
USE A VERSÃO DA SUA PREFÊNCIA (VOCÊ SÓ PRECISA SEGUIR UM TUTORIAL):
VERSÃO COM COOKIE:
1º – Acesse o Painel Blogger e clique na Guia Modelo.
2º – Em seguida clique no Botão Editar HTML.
3º – Depois Segure as teclas CTRL+F e procure por:
</head>
4º – E ACIMA dele cole o seguinte código:
<link media="screen" rel="stylesheet" href="http://dl.dropbox.com/u/44914301/codigos/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/44914301/codigos/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"700px", inline:true, href:"#subscribe"});
}
});
</script>
5º - Em Seguida Segure as teclas CTRL+F novamente e procure por:
]]></b:skin>
6º – E ACIMA dele cole o seguinte código:
#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}
.box-tagline {color: #999;font-size: 14px;margin: 0;text-align: center;}
.box-side.left {padding: 0 30px 0 15px;border-right: 1px solid #ecedf3;}
.box-icon {width: 72px;height: 54px;padding: 6px 0 0 0;margin: 0 auto;}
.box-icon a.rss{display: block;width: 70px;height: 56px;margin: 0 auto;}
.box-icon a{display: block;width: 72px;height: 54px;}
.box-icon a.email img,.box-icon a.rss img {margin: -5px 0 0;border: 0 none;}
.box-side h4, .box-side h4 a {font-size: 14px;line-height: 14px;color: #f26535;font-weight: bold;}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {font-size: 11px;color: #5e6066; line-height: 18px;margin: 0 0 20px 0;}
.box-side h4 a:hover {color: #f26535;}
.demo {display:none;}
#subscribe{font:12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited{text-decoration:none;}
#subs-container{position:relative;padding:35px 0 30px;}
.box-icon{width:72px;height:54px;margin:0 auto;padding:6px 0 0;}
.box-icon a.rss{display:block;width:70px;height:56px;margin:0 auto;}
.box-icon a{display:block;width:72px;height:54px;}
.box-icon a.email img,.box-icon a.rss img{border:0 none;margin:-5px 0 0;}
.box-side h4,.box-side h4 a{font-size:14px;line-height:14px;color:#f26535;font-weight:700;}
.box-side h4{margin:20px 0 10px;}
.box-side h5{font-size:11px;color:#5e6066;line-height:18px;margin:0 0 20px;}
.box-side h4 a:hover{color:#f26535;}
7º – E agora segure as teclas CTRL+F e desta vez procure por:
<body>
8º – E ABAIXO dele cole o seguinte código:
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h2 class='box-title' style='text-transform: uppercase;color: #2C2D31;font-size: 20px;font-weight: 700;text-align: center;margin: 10px 0;'>Assine Nosso Feed!</h2>
<h3 class='box-tagline' style='color: #999;font-size: 14px;text-align: center;margin: 0;'>Receba Nossas Atualizações em Seu E-mail:</h3>
<div class='clearfix' id='subs-container' style='position: relative;padding: 35px 0 0px;'>
<div class='box-side left' style='width:350px;text-align: center;border-right:1px solid #ecedf3;padding:0 20px 0 15px;'>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Receba Todos os Nossos Artigos Automaticamente em Seu E-mail</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Tenha a Exclusividade de Receber Boletins do Nosso Blog</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Ajude a fazer Nosso Blog Crescer!!!</li>
</div>
<div class='box-side right' style='width: 240px !important;float:right;margin-top:-236px;margin-right:10px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='http://4.bp.blogspot.com/-V3ZjIQjI2Bs/ToXN-p2XDmI/AAAAAAAACJA/6AR0hYMmcyk/s1600/social_rss_box_orange.png' style='margin-top: -2px;width: 124px;height: 125px;' title='Assine nosso feed gratis'/><p>
<input name='email' onblur='if (this.value == '') {this.value = 'Digite seu e-mail aqui!';}' onfocus='if (this.value == 'Digite seu e-mail aqui!') {this.value = '';}' size='30' style='background-image: url('http://2.bp.blogspot.com/-X8mQ080Fah4/ToXN1HRKeRI/AAAAAAAACI8/6sfxOEWP-h0/s1600/lightbox-text-box.png');margin-bottom: 5px;border: 0px;line-height: 20px;padding-right: 10px;padding-top: 12px;margin-left: 3px;background-repeat: no-repeat;padding-bottom: 12px;width: 230px;color: #555;font-family: Helvetica, Arial, sans-serif;font-size: 14px;padding-left: 10px;background-color: transparent;background-position: left center;outline: none;' type='text' value='Digite seu e-mail aqui!'/>
</p><input name='uri' type='hidden' value='NOME DO FEED'/><input name='loc' type='hidden' value='pt_BR'/><input style='width: 255px;height: 47px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(http://3.bp.blogspot.com/-I0g_4FDWzQ4/ToXNpurT73I/AAAAAAAACI4/IoNwkbm2zLw/s1600/red-button.png) no-repeat;text-align: center;border: none;font-size: 19px;color: white;font-family: Helvetica, Arial, sans-serif;font-weight: bold;text-shadow: 1px 1px 0px black;text-transform: uppercase;letter-spacing: -1px;line-height: 45px;' type='submit' value='INSCREVER-SE!'/></form><br/><span style='float: left;margin-top: 0px;color: gray;margin-left: -400px;font-size: 13px;'>Desenvolvido Por <b><a href='http://www.blogandocomfacilidade.com/2011/10/fantastica-popup-em-janela-modal-para.html' style='color: #004D97 !important;' target='_blank'> Iago Melanias - Blogando com Facilidade</a></b></span>
</div></div><br/><br/></div></div>
9º – Em seguida clique em Salvar Modelo
VERSÃO SEM COOKIE:
</head>
<link media="screen" rel="stylesheet" href="http://dl.dropbox.com/u/44914301/codigos/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/44914301/codigos/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
$.colorbox({width:"700px", inline:true, href:"#subscribe"});
}
});
</script>
]]></b:skin>
#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}
.box-tagline {color: #999;font-size: 14px;margin: 0;text-align: center;}
.box-side.left {padding: 0 30px 0 15px;border-right: 1px solid #ecedf3;}
.box-icon {width: 72px;height: 54px;padding: 6px 0 0 0;margin: 0 auto;}
.box-icon a.rss{display: block;width: 70px;height: 56px;margin: 0 auto;}
.box-icon a{display: block;width: 72px;height: 54px;}
.box-icon a.email img,.box-icon a.rss img {margin: -5px 0 0;border: 0 none;}
.box-side h4, .box-side h4 a {font-size: 14px;line-height: 14px;color: #f26535;font-weight: bold;}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {font-size: 11px;color: #5e6066; line-height: 18px;margin: 0 0 20px 0;}
.box-side h4 a:hover {color: #f26535;}
.demo {display:none;}
#subscribe{font:12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited{text-decoration:none;}
#subs-container{position:relative;padding:35px 0 30px;}
.box-icon{width:72px;height:54px;margin:0 auto;padding:6px 0 0;}
.box-icon a.rss{display:block;width:70px;height:56px;margin:0 auto;}
.box-icon a{display:block;width:72px;height:54px;}
.box-icon a.email img,.box-icon a.rss img{border:0 none;margin:-5px 0 0;}
.box-side h4,.box-side h4 a{font-size:14px;line-height:14px;color:#f26535;font-weight:700;}
.box-side h4{margin:20px 0 10px;}
.box-side h5{font-size:11px;color:#5e6066;line-height:18px;margin:0 0 20px;}
.box-side h4 a:hover{color:#f26535;}
<body>
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h2 class='box-title' style='text-transform: uppercase;color: #2C2D31;font-size: 20px;font-weight: 700;text-align: center;margin: 10px 0;'>Assine Nosso Feed!</h2>
<h3 class='box-tagline' style='color: #999;font-size: 14px;text-align: center;margin: 0;'>Receba Nossas Atualizações em Seu E-mail:</h3>
<div class='clearfix' id='subs-container' style='position: relative;padding: 35px 0 0px;'>
<div class='box-side left' style='width:350px;text-align: center;border-right:1px solid #ecedf3;padding:0 20px 0 15px;'>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Receba Todos os Nossos Artigos Automaticamente em Seu E-mail</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Tenha a Exclusividade de Receber Boletins do Nosso Blog</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Ajude a fazer Nosso Blog Crescer!!!</li>
</div>
<div class='box-side right' style='width: 240px !important;float:right;margin-top:-236px;margin-right:10px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='http://4.bp.blogspot.com/-V3ZjIQjI2Bs/ToXN-p2XDmI/AAAAAAAACJA/6AR0hYMmcyk/s1600/social_rss_box_orange.png' style='margin-top: -2px;width: 124px;height: 125px;' title='Assine nosso feed gratis'/><p>
<input name='email' onblur='if (this.value == '') {this.value = 'Digite seu e-mail aqui!';}' onfocus='if (this.value == 'Digite seu e-mail aqui!') {this.value = '';}' size='30' style='background-image: url('http://2.bp.blogspot.com/-X8mQ080Fah4/ToXN1HRKeRI/AAAAAAAACI8/6sfxOEWP-h0/s1600/lightbox-text-box.png');margin-bottom: 5px;border: 0px;line-height: 20px;padding-right: 10px;padding-top: 12px;margin-left: 3px;background-repeat: no-repeat;padding-bottom: 12px;width: 230px;color: #555;font-family: Helvetica, Arial, sans-serif;font-size: 14px;padding-left: 10px;background-color: transparent;background-position: left center;outline: none;' type='text' value='Digite seu e-mail aqui!'/>
</p><input name='uri' type='hidden' value='NOME DO FEED'/><input name='loc' type='hidden' value='pt_BR'/><input style='width: 255px;height: 47px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(http://3.bp.blogspot.com/-I0g_4FDWzQ4/ToXNpurT73I/AAAAAAAACI4/IoNwkbm2zLw/s1600/red-button.png) no-repeat;text-align: center;border: none;font-size: 19px;color: white;font-family: Helvetica, Arial, sans-serif;font-weight: bold;text-shadow: 1px 1px 0px black;text-transform: uppercase;letter-spacing: -1px;line-height: 45px;' type='submit' value='INSCREVER-SE!'/></form><br/><span style='float: left;margin-top: 0px;color: gray;margin-left: -400px;font-size: 13px;'>Desenvolvido Por <b><a href='http://www.blogandocomfacilidade.com/2011/10/fantastica-popup-em-janela-modal-para.html' style='color: #004D97 !important;' target='_blank'> Iago Melanias - Blogando com Facilidade</a></b></span>
</div></div><br/><br/></div></div>
VERSÃO SEM COOKIE E QUE SÓ APARECE NA PÁGINA INICIAL:
1º – Acesse o Painel Blogger e clique na Guia Modelo.
2º – Em seguida clique no Botão Editar HTML.
3º – Depois Segure as teclas CTRL+F e procure por:
</head>
4º – E ACIMA dele cole o seguinte código:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link media="screen" rel="stylesheet" href="http://dl.dropbox.com/u/44914301/codigos/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/44914301/codigos/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
$.colorbox({width:"700px", inline:true, href:"#subscribe"});
}
});
</script></b:if>
5º - Em Seguida Segure as teclas CTRL+F novamente e procure por:
]]></b:skin>
6º – E ACIMA dele cole o seguinte código:
#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}
.box-tagline {color: #999;font-size: 14px;margin: 0;text-align: center;}
.box-side.left {padding: 0 30px 0 15px;border-right: 1px solid #ecedf3;}
.box-icon {width: 72px;height: 54px;padding: 6px 0 0 0;margin: 0 auto;}
.box-icon a.rss{display: block;width: 70px;height: 56px;margin: 0 auto;}
.box-icon a{display: block;width: 72px;height: 54px;}
.box-icon a.email img,.box-icon a.rss img {margin: -5px 0 0;border: 0 none;}
.box-side h4, .box-side h4 a {font-size: 14px;line-height: 14px;color: #f26535;font-weight: bold;}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {font-size: 11px;color: #5e6066; line-height: 18px;margin: 0 0 20px 0;}
.box-side h4 a:hover {color: #f26535;}
.demo {display:none;}
#subscribe{font:12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited{text-decoration:none;}
#subs-container{position:relative;padding:35px 0 30px;}
.box-icon{width:72px;height:54px;margin:0 auto;padding:6px 0 0;}
.box-icon a.rss{display:block;width:70px;height:56px;margin:0 auto;}
.box-icon a{display:block;width:72px;height:54px;}
.box-icon a.email img,.box-icon a.rss img{border:0 none;margin:-5px 0 0;}
.box-side h4,.box-side h4 a{font-size:14px;line-height:14px;color:#f26535;font-weight:700;}
.box-side h4{margin:20px 0 10px;}
.box-side h5{font-size:11px;color:#5e6066;line-height:18px;margin:0 0 20px;}
.box-side h4 a:hover{color:#f26535;}
7º – E agora segure as teclas CTRL+F e desta vez procure por:
<body>
8º – E ABAIXO dele cole o seguinte código:
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h2 class='box-title' style='text-transform: uppercase;color: #2C2D31;font-size: 20px;font-weight: 700;text-align: center;margin: 10px 0;'>Assine Nosso Feed!</h2>
<h3 class='box-tagline' style='color: #999;font-size: 14px;text-align: center;margin: 0;'>Receba Nossas Atualizações em Seu E-mail:</h3>
<div class='clearfix' id='subs-container' style='position: relative;padding: 35px 0 0px;'>
<div class='box-side left' style='width:350px;text-align: center;border-right:1px solid #ecedf3;padding:0 20px 0 15px;'>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Receba Todos os Nossos Artigos Automaticamente em Seu E-mail</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Tenha a Exclusividade de Receber Boletins do Nosso Blog</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Ajude a fazer Nosso Blog Crescer!!!</li>
</div>
<div class='box-side right' style='width: 240px !important;float:right;margin-top:-236px;margin-right:10px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='http://4.bp.blogspot.com/-V3ZjIQjI2Bs/ToXN-p2XDmI/AAAAAAAACJA/6AR0hYMmcyk/s1600/social_rss_box_orange.png' style='margin-top: -2px;width: 124px;height: 125px;' title='Assine nosso feed gratis'/><p>
<input name='email' onblur='if (this.value == '') {this.value = 'Digite seu e-mail aqui!';}' onfocus='if (this.value == 'Digite seu e-mail aqui!') {this.value = '';}' size='30' style='background-image: url('http://2.bp.blogspot.com/-X8mQ080Fah4/ToXN1HRKeRI/AAAAAAAACI8/6sfxOEWP-h0/s1600/lightbox-text-box.png');margin-bottom: 5px;border: 0px;line-height: 20px;padding-right: 10px;padding-top: 12px;margin-left: 3px;background-repeat: no-repeat;padding-bottom: 12px;width: 230px;color: #555;font-family: Helvetica, Arial, sans-serif;font-size: 14px;padding-left: 10px;background-color: transparent;background-position: left center;outline: none;' type='text' value='Digite seu e-mail aqui!'/>
</p><input name='uri' type='hidden' value='NOME DO FEED'/><input name='loc' type='hidden' value='pt_BR'/><input style='width: 255px;height: 47px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(http://3.bp.blogspot.com/-I0g_4FDWzQ4/ToXNpurT73I/AAAAAAAACI4/IoNwkbm2zLw/s1600/red-button.png) no-repeat;text-align: center;border: none;font-size: 19px;color: white;font-family: Helvetica, Arial, sans-serif;font-weight: bold;text-shadow: 1px 1px 0px black;text-transform: uppercase;letter-spacing: -1px;line-height: 45px;' type='submit' value='INSCREVER-SE!'/></form><br/><span style='float: left;margin-top: 0px;color: gray;margin-left: -400px;font-size: 13px;'>Desenvolvido Por <b><a href='http://www.blogandocomfacilidade.com/2011/10/fantastica-popup-em-janela-modal-para.html' style='color: #004D97 !important;' target='_blank'> Iago Melanias - Blogando com Facilidade</a></b></span>
</div></div><br/><br/></div></div>
9º – Em seguida clique em Salvar Modelo
VERSÃO COM COOKIE E QUE SÓ APARECE NA PÁGINA INICIAL:
1º – Acesse o Painel Blogger e clique na Guia Modelo.
2º – Em seguida clique no Botão Editar HTML.
3º – Depois Segure as teclas CTRL+F e procure por:
</head>
4º – E ACIMA dele cole o seguinte código:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link media="screen" rel="stylesheet" href="http://dl.dropbox.com/u/44914301/codigos/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/44914301/codigos/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"700px", inline:true, href:"#subscribe"});
}
});
</script></b:if>
5º - Em Seguida Segure as teclas CTRL+F novamente e procure por:
]]></b:skin>
6º – E ACIMA dele cole o seguinte código:
#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}
.box-tagline {color: #999;font-size: 14px;margin: 0;text-align: center;}
.box-side.left {padding: 0 30px 0 15px;border-right: 1px solid #ecedf3;}
.box-icon {width: 72px;height: 54px;padding: 6px 0 0 0;margin: 0 auto;}
.box-icon a.rss{display: block;width: 70px;height: 56px;margin: 0 auto;}
.box-icon a{display: block;width: 72px;height: 54px;}
.box-icon a.email img,.box-icon a.rss img {margin: -5px 0 0;border: 0 none;}
.box-side h4, .box-side h4 a {font-size: 14px;line-height: 14px;color: #f26535;font-weight: bold;}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {font-size: 11px;color: #5e6066; line-height: 18px;margin: 0 0 20px 0;}
.box-side h4 a:hover {color: #f26535;}
.demo {display:none;}
#subscribe{font:12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited{text-decoration:none;}
#subs-container{position:relative;padding:35px 0 30px;}
.box-icon{width:72px;height:54px;margin:0 auto;padding:6px 0 0;}
.box-icon a.rss{display:block;width:70px;height:56px;margin:0 auto;}
.box-icon a{display:block;width:72px;height:54px;}
.box-icon a.email img,.box-icon a.rss img{border:0 none;margin:-5px 0 0;}
.box-side h4,.box-side h4 a{font-size:14px;line-height:14px;color:#f26535;font-weight:700;}
.box-side h4{margin:20px 0 10px;}
.box-side h5{font-size:11px;color:#5e6066;line-height:18px;margin:0 0 20px;}
.box-side h4 a:hover{color:#f26535;}
7º – E agora segure as teclas CTRL+F e desta vez procure por:
<body>
8º – E ABAIXO dele cole o seguinte código:
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h2 class='box-title' style='text-transform: uppercase;color: #2C2D31;font-size: 20px;font-weight: 700;text-align: center;margin: 10px 0;'>Assine Nosso Feed!</h2>
<h3 class='box-tagline' style='color: #999;font-size: 14px;text-align: center;margin: 0;'>Receba Nossas Atualizações em Seu E-mail:</h3>
<div class='clearfix' id='subs-container' style='position: relative;padding: 35px 0 0px;'>
<div class='box-side left' style='width:350px;text-align: center;border-right:1px solid #ecedf3;padding:0 20px 0 15px;'>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Receba Todos os Nossos Artigos Automaticamente em Seu E-mail</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Tenha a Exclusividade de Receber Boletins do Nosso Blog</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro</li>
<li style='font-size: 14px;font-family: arial;background-image: url('http://1.bp.blogspot.com/-W68Fg29DCqc/ToXGKw12swI/AAAAAAAACIo/13xFNOCTcCI/s1600/bullet.png');background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Ajude a fazer Nosso Blog Crescer!!!</li>
</div>
<div class='box-side right' style='width: 240px !important;float:right;margin-top:-236px;margin-right:10px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='http://4.bp.blogspot.com/-V3ZjIQjI2Bs/ToXN-p2XDmI/AAAAAAAACJA/6AR0hYMmcyk/s1600/social_rss_box_orange.png' style='margin-top: -2px;width: 124px;height: 125px;' title='Assine nosso feed gratis'/><p>
<input name='email' onblur='if (this.value == '') {this.value = 'Digite seu e-mail aqui!';}' onfocus='if (this.value == 'Digite seu e-mail aqui!') {this.value = '';}' size='30' style='background-image: url('http://2.bp.blogspot.com/-X8mQ080Fah4/ToXN1HRKeRI/AAAAAAAACI8/6sfxOEWP-h0/s1600/lightbox-text-box.png');margin-bottom: 5px;border: 0px;line-height: 20px;padding-right: 10px;padding-top: 12px;margin-left: 3px;background-repeat: no-repeat;padding-bottom: 12px;width: 230px;color: #555;font-family: Helvetica, Arial, sans-serif;font-size: 14px;padding-left: 10px;background-color: transparent;background-position: left center;outline: none;' type='text' value='Digite seu e-mail aqui!'/>
</p><input name='uri' type='hidden' value='NOME DO FEED'/><input name='loc' type='hidden' value='pt_BR'/><input style='width: 255px;height: 47px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(http://3.bp.blogspot.com/-I0g_4FDWzQ4/ToXNpurT73I/AAAAAAAACI4/IoNwkbm2zLw/s1600/red-button.png) no-repeat;text-align: center;border: none;font-size: 19px;color: white;font-family: Helvetica, Arial, sans-serif;font-weight: bold;text-shadow: 1px 1px 0px black;text-transform: uppercase;letter-spacing: -1px;line-height: 45px;' type='submit' value='INSCREVER-SE!'/></form><br/><span style='float: left;margin-top: 0px;color: gray;margin-left: -400px;font-size: 13px;'>Desenvolvido Por <b><a href='http://www.blogandocomfacilidade.com/2011/10/fantastica-popup-em-janela-modal-para.html' style='color: #004D97 !important;' target='_blank'> Iago Melanias - Blogando com Facilidade</a></b></span>
</div></div><br/><br/></div></div>
9º – Em seguida clique em Salvar Modelo.
O QUE SÃO COOKIES?
*ATENÇÃO: Esse tutorial e o código usado é dessa nossa autoria, pedimos que você não copie sem adicionar os respectivos créditos preferencialmente na parte superior da postagem, caso contrário, ela poderá se denunciada e você terá seu blog afetado. O Código é Nosso e também pedimos que você não remova o crédito que está no fim da PopUp, isso serve de incentivo para nosso trabalho.
Excelente Widget, muito bem desenvolvido…
Aconselho plenamente a todos!
Oi Iago… Pode me explicar melhor essas versões com e sem cookie?
Obg… Holtz
mosso é mt coisa
@Free Step Tube KKKKKKKKKKK, você só precisa seguir um tutorial, não todos, hahaha.
@Iago MelaniasIago num reparou que tenho duvidas não?
@Holtz Oh, Desculpe, Atualizei Post com a informação sobre os Cookies. Desculpe pela Demora.
Muito bom seu tuto Iago, vc conhece algum para wordpress?
@Marilucia Tem o PopUp Domination, mas ele é pago.
ola
Tem como fazer um Poup Up, só que eu consiga colocar os botões de curtir o meu blog no face do +1 e pra Seguir o blog???
se puder me responder por email eu agradeço
[email protected]
@Lord Massaro Tem uma outra modal, para seguir blog e feed também, confira: http://www.blogandocomfacilidade.com/2011/10/fantastica-popup-em-janela-modal-para.html
Ai tipo se eu por a "VERSÃO COM COOKIE E QUE SÓ APARECE NA PÁGINA INICIAL" toda vez que entra no blog se clicar em home aparece?
@Holtz Não, para esse funcionamento usa-se a versão sem cookie.
Desculpe pelo encomodo..E pq eu so queria saber qual era a versão que so quando entrasse no blog aparecesse… [Toda vem que entrasse]Mas ai se clisasse e home nao aparecia
@Holtz Sem Problemas, não foi incômodo algum.
Ai eu uso a sem Cookie né? rs
@Holtz Sim.
Pow iago.. Axo que não entendeu oq quis dizer.. E que so aparça quando eu Entrar no blog… não clicar na pagina inicial… Tem como?
@Holtz Então Opte pela versão com Cookie.
Mas ai aparece toda vez q entrar?
@Holtz Não, aparece e se fechar não aparece mais, a sem cookie abre toda hora.
vlw
Não funcionou…
Iago parabéns mais uma vez pelo seu empenho e desenvolver esses scripts pra gente!
como eu disse no outro tutorial a minha inteção é outra ao utilizar essa Popup em meu blog.
Fiz umas modificações e está quase perfeito. exceto por um detalhe no lado direito do box que apresenta falha. tentei modificar pelo css da janela e não consegui. o que eu devo fazer pra concerta isso?
me ajude por favor!
Olha,caraaaaa me ajudou muinto eu coloquei aquele que aparece toda hora,cara vc é muito fodaaa,gostaria de fazer parceiria???
http://historiasepensamento.blogspot.com/ olha esse é meu blog
fale comigo pelo msn: andreemerick2008@hotmail se quiser fazer parceiria caso queira falar pelo hotmail é o mesmo e-mail! *.*
olhe lá meu blog para ver como ficou,eu procurei esses Pop up há muito tempo!! e só esse pego Gloria a deus Cara eu te amoo!
adoreii!
Amigo fiz tudo certo a janela abra mas os textos estao por cima das imagens nao estao alinhados tem como vc arruma? obrigado
@uelinton Está funcionando corretamente, é que em alguns blogs não fica perfeito, entre em contato pela nossa página de contato e lhe ajudo à resolver por e-mail.
Iago já consegui Obrigado!!!
Consegui com sucesso mas vc poderia me explicar como se uma janela dessa para por exemplo eu colocar uma banner. ou fazer uma promoção no site . ai divulgar algo entendeu !!!
faz um tutorial explicando pf !!
Poxa parceiro,fiz tudo de passo a passo,mas nada apareceu,tentei todas as versões,podes me Dar um Help?
Agradeço desde já
@lamark Infelizmente, ela não funciona em todos os blogs por causa do jquery, olhe se não há conflito, nos comentários eu ensinei à resolver isso.
Muito Foda o Tutorial… Só Tá faltando acompanhar a barra de rolagem.
ai iago venho acompanhando a BCF a um tempo e vi esta post que me chamou a atenção porque eu sempre quis saber como fazer este efeito shadowbox com uma janela.
mais eu queria mesmo saber se tem como colocar uma like box do facebook em vez do feed.
Obrigado e esperando respota ;D
@Leonardo, tem sim, mas isso é muito complicado, ensinarei isso em breve. Obrigado pelo Comentário.
consegui fazer, clica no meu nome para ver ;D
tem como colocar essa box acompanhando a tela ao usar a barra de rolagem ?
@Iago Melanias tem como tirar minha duvida ?
@Leonardo, Oh, desculpe-me pela demora, é que estou atolado de e-mails para responder, tem sim, mas isso requer muito conhecimento, você teria que fixar a box e depois ajustar a margem, só que seria uma grande dor de cabeça para ajustar.
ai,não foi está dizendo que não esta fechado adequadamente!!
Esta postagem foi removida pelo autor.
1-Tem como em vez de colocar o negocio do feed colocar alguma propaganda, mensagem etc?
2-Tem como programar para aparecer em uma única pagina do site e nao em todas?
@Willian, Olá, tem como colocar sim outra coisa, depois da div class='box-side left'… você coloca o conteúdo. Para mostra em uma página específica, basta apenas você ver nossas condicionais e usa-la no código do passo 4, acima coloque a condicional, abaixo dela coloque o código de fechamento da tag b:if. Se não conseguiu compreender, entre em contato por e-mail.
Como faço para alterar o tamanho da janela?
Esquece problema resolvid
só colocar parametro 'height' na linha $.colorbox( do javascript
Não funcionou. Pode me falar por quê? O meu blog é http://www.bovoqui.com. Se quiser pode analisar o código-fonte. Está entrando em conflito com algo? Responda-me por favor!
Amigão, parabéns pelo post muito bom gostei do visal, além de ser muito atrativo vc ainda disponibilizou em dois modos o que é muito difícil de se achar por aí..Um grande abraço e obrigado pela sugestão das quais utilizarei a versão com 'cookie' para que não fique incomodando as pessoas todas às vezes que clicarem em algum post.
@Pietro, Olá, veja se não é conflito em jquery.
@Caio, Olá, fico feliz que tenha gostado. Realmente a versão com cookie é bem melhor.
Excelente amigo. Parabéns por desenvolver algo tão útil para blogueiros. Posso sugerir algo?
Porque você não cria algo do estilo desse popUp onde o blogueiro pudesse personalizar de forma fácil quando quiser oferecer por exemplo um e-book, um brinde ou simplesmente quer deixar alguma mensagem para o leitor.
Recentemente distribuí gratuitamente um e-book em um de meus blogs e se eu tivesse uma janela como essa, onde o leitor pudesse ter conhecimento do brinde e já ter o link de download,certamente teria atingido uma quantidade maior de downloads.
Abraços e parabéns pelo blog
Como faço pra tirar o conflito pra poder usar esse script?
ô iago… tô usando tua versão antiga. Quero a VERSÃO COM COOKIE E QUE SÓ APARECE NA PÁGINA INICIAL mas não consigo achar o código do passo 2. Ajuda aee namoral.
você é conhece mesmo…. todos os seus códigos dão certo.. parabéns mesmo ..
Estou com problema no feed: Received HTTP error code 400 while fetching source feed. Alguém pode me ajudar?
gostei do widget mais ele funcionou só uma vez no meu blog depois ele nã funcionu mais i o menu nã tbm ficou errado e o slide nã funcionou tbm mais quando eu removi esse widget tudo voltou o q devo fazer pra tudo funcionar corretamente com esse widget????
Muito boa informção pena que no meu html não apareceu a a tag body…
Procure por: <body>. Creio que funcionará.
Eu sei que tem a página de pedidos mais aqui é a maior referência do que eu quero pedir. Uma PopUp parecida com essa só que invés do feed, um pedido para clicar no “+1″ e se não for pedir demais, também um certo tempo pra fechar automático. Já que agora o Google usa resultados considerando essa ferramenta, acho que seria bom pra muitos blogs.
Vc é o cara!! acredite fez mais um blogueiro feliz hj.
Parabéns continue assim..
abraço
tem para wordpress?