01 setembro, 2011

Fantástica PopUp em Janela Modal para Assinar Feed

16:01    


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://javascrips-bcf.webs.com/javascripts/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://javascrips-bcf.webs.com/javascripts/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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFDSAn-12o06IIhLrFqyc0LcI7VmZtZ-0Yov6JiJgf5fug5edeopxmt4sarxyC7KpcaWjT6zXYBrlZvPdFCEr0kLrVK-dY6JP_vvnU_hsENBTEQITq_OXwWZ-b-lLxRttXqLmEPQYDmw/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 == &apos;&apos;) {this.value = &apos;Digite seu e-mail aqui!&apos;;}' onfocus='if (this.value == &apos;Digite seu e-mail aqui!&apos;) {this.value = &apos;&apos;;}' size='30' style='margin-top: -12px;background-image: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvC1yI9v5CiQt2wZCG9dZNgarnTI1SoHeR7XoAO4H9eDFbxPVnEE5qDJwHRJK97GtjysrFVzl8mBLCP5gUL6U5AspjoIe2o6ULK6TyrRxkQPO9oAPp0QNzku4CLsR3CvJfrC3u4DgGVSg/s1600/lightbox-text-box.png&apos;);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-top: -10px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHFtLycMqdFOXqF9eh8G16bA224VUxfWNBRRrLgMK4nQ-mySS7MvsHIWzqJo7olsjsTmSLFqQAl6hxXKvhffVeKxphnyFLjSH6zSA1hYtH3Dm4D4s_F2kL8Jf5pgttUWq8e4jRBAewu4/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:
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://javascrips-bcf.webs.com/javascripts/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://javascrips-bcf.webs.com/javascripts/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>
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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFDSAn-12o06IIhLrFqyc0LcI7VmZtZ-0Yov6JiJgf5fug5edeopxmt4sarxyC7KpcaWjT6zXYBrlZvPdFCEr0kLrVK-dY6JP_vvnU_hsENBTEQITq_OXwWZ-b-lLxRttXqLmEPQYDmw/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 == &apos;&apos;) {this.value = &apos;Digite seu e-mail aqui!&apos;;}' onfocus='if (this.value == &apos;Digite seu e-mail aqui!&apos;) {this.value = &apos;&apos;;}' size='30' style='margin-top: -12px;background-image: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvC1yI9v5CiQt2wZCG9dZNgarnTI1SoHeR7XoAO4H9eDFbxPVnEE5qDJwHRJK97GtjysrFVzl8mBLCP5gUL6U5AspjoIe2o6ULK6TyrRxkQPO9oAPp0QNzku4CLsR3CvJfrC3u4DgGVSg/s1600/lightbox-text-box.png&apos;);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-top: -10px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHFtLycMqdFOXqF9eh8G16bA224VUxfWNBRRrLgMK4nQ-mySS7MvsHIWzqJo7olsjsTmSLFqQAl6hxXKvhffVeKxphnyFLjSH6zSA1hYtH3Dm4D4s_F2kL8Jf5pgttUWq8e4jRBAewu4/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 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://javascrips-bcf.webs.com/javascripts/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://javascrips-bcf.webs.com/javascripts/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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFDSAn-12o06IIhLrFqyc0LcI7VmZtZ-0Yov6JiJgf5fug5edeopxmt4sarxyC7KpcaWjT6zXYBrlZvPdFCEr0kLrVK-dY6JP_vvnU_hsENBTEQITq_OXwWZ-b-lLxRttXqLmEPQYDmw/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 == &apos;&apos;) {this.value = &apos;Digite seu e-mail aqui!&apos;;}' onfocus='if (this.value == &apos;Digite seu e-mail aqui!&apos;) {this.value = &apos;&apos;;}' size='30' style='margin-top: -12px;background-image: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvC1yI9v5CiQt2wZCG9dZNgarnTI1SoHeR7XoAO4H9eDFbxPVnEE5qDJwHRJK97GtjysrFVzl8mBLCP5gUL6U5AspjoIe2o6ULK6TyrRxkQPO9oAPp0QNzku4CLsR3CvJfrC3u4DgGVSg/s1600/lightbox-text-box.png&apos;);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-top: -10px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHFtLycMqdFOXqF9eh8G16bA224VUxfWNBRRrLgMK4nQ-mySS7MvsHIWzqJo7olsjsTmSLFqQAl6hxXKvhffVeKxphnyFLjSH6zSA1hYtH3Dm4D4s_F2kL8Jf5pgttUWq8e4jRBAewu4/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://javascrips-bcf.webs.com/javascripts/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://javascrips-bcf.webs.com/javascripts/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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41PZwf8PHnhewwZ0ArorrhdCv1X8yIpWiD0Y8AvZ5c2gJnIFKB_TMdGDrne6kBn34Ocaa7GoMhR5l__bEWtmh-ggVPJChH9Z5PRpULeSSleB3iiOqcAncvZpUIrm9LGLBnD5wb36xTI0/s1600/bullet.png&apos;);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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOME DO FEED&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFDSAn-12o06IIhLrFqyc0LcI7VmZtZ-0Yov6JiJgf5fug5edeopxmt4sarxyC7KpcaWjT6zXYBrlZvPdFCEr0kLrVK-dY6JP_vvnU_hsENBTEQITq_OXwWZ-b-lLxRttXqLmEPQYDmw/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 == &apos;&apos;) {this.value = &apos;Digite seu e-mail aqui!&apos;;}' onfocus='if (this.value == &apos;Digite seu e-mail aqui!&apos;) {this.value = &apos;&apos;;}' size='30' style='margin-top: -12px;background-image: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvC1yI9v5CiQt2wZCG9dZNgarnTI1SoHeR7XoAO4H9eDFbxPVnEE5qDJwHRJK97GtjysrFVzl8mBLCP5gUL6U5AspjoIe2o6ULK6TyrRxkQPO9oAPp0QNzku4CLsR3CvJfrC3u4DgGVSg/s1600/lightbox-text-box.png&apos;);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-top: -10px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHFtLycMqdFOXqF9eh8G16bA224VUxfWNBRRrLgMK4nQ-mySS7MvsHIWzqJo7olsjsTmSLFqQAl6hxXKvhffVeKxphnyFLjSH6zSA1hYtH3Dm4D4s_F2kL8Jf5pgttUWq8e4jRBAewu4/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?
É um sistema que grava dados no navegador, nesse tutorial, isso significaria que quando o leitor fechar a popup, ela não voltará à abrir, a não ser que  os cookies do navegador sejam limpados pelo próprio leitor. É recomendável usar as versões com cookie pois deixam a experência de entrar no seu site melhor, sem abrir muitas janelas ou atrapalhar a leitura mais que uma vez.

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


Via: Blogando com facilidade