PopUp em Janela para Assinar Feed

Para os que navegam na internet constantemente, já se deparou com aquelas páginas antes do blog abrir pedindo para assinar o feed. É um ótimo aplicativo usado no wordpress, e como para quem usa Blogger é tudo um pouco mais complicado,então pesquisando na enternet encontrei um site bem legal que ensina a criar essa página de subscrição e bem mais leve que as usadas em blogs do wordpress, mas bem semelhante, veja:

Muito bom, e bem leve e o mais importante, carrega muito rápido, o que é excelente para pessoas com conexões lentas.
encontrei esse tutorial no blog Blogando com Facilidade e adorei o trabalho realizado pelo cara, o exemplo de como funciona esta aqui no meu blog, existem 4 versões do widget, 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, irei mostrar apenas 2 delas e quem quiser ter acesso as 4 versões Click Aqui e veja o tutorial do criador do widget. vamos aos que interessa.
VERSÃO COM COOKIE:
1º – Acesse o Painel do Blogger e clique na Guia Modelo.
2º – Em seguida clique no Botão Editar HTML.
3º – Depois Segure as teclas CTRL+F ou F3 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 ou F3 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqm2d7lco3dxmSBI4wVZt2Fi3lJvCpYvdj-m-OSGF4WnH9YTQ6Y0xevkfr15TiCmf0OON4AGzk6eK82btyfLSz08UNXq3WJ-FPCnH-hTi3OVzADvF_bC76RH_Q2-uoF5yaFBODjkZr6I/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVkYz3LPSGhT3Jb20HJwtcIArOTS7eQDZWwOpTMcznHn6s3VoGBGruIW9It_IqW92gPViV4BMSznqV_39bBUs0hVG0OW-0wVgKXl5qL9srTgO_qyHboS1q5uR1GzM_QfeFLPpM9zsMu0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT2HJtJBkS0dg4gS9OUYSF-mqR3afyv7yzTS-H20yPD21cZLNpb9Qw2QPMbo-sDFb7zs7UJNUCIBoxNp6yOg0xmnE9BBUr0xtH_qTDthFS7I5G77xQaoLrClaM5BT7ZdGmQ3K8vdrIcPE/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º – Visualize e se estiver tudo certo 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://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>

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wu7xezkNcGUl8-nd1OuG3ngRgdBKFnt4NDSzTVlQiY04AotN9yOK6Of8YFOTIWwj1sjvLkKbZErZJgbk5q8VnbeDK5RhG9-0OabjU2_axA9Ng66dUxP188FnLV3uWlfMPlvK2pYHRY0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqm2d7lco3dxmSBI4wVZt2Fi3lJvCpYvdj-m-OSGF4WnH9YTQ6Y0xevkfr15TiCmf0OON4AGzk6eK82btyfLSz08UNXq3WJ-FPCnH-hTi3OVzADvF_bC76RH_Q2-uoF5yaFBODjkZr6I/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVkYz3LPSGhT3Jb20HJwtcIArOTS7eQDZWwOpTMcznHn6s3VoGBGruIW9It_IqW92gPViV4BMSznqV_39bBUs0hVG0OW-0wVgKXl5qL9srTgO_qyHboS1q5uR1GzM_QfeFLPpM9zsMu0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT2HJtJBkS0dg4gS9OUYSF-mqR3afyv7yzTS-H20yPD21cZLNpb9Qw2QPMbo-sDFb7zs7UJNUCIBoxNp6yOg0xmnE9BBUr0xtH_qTDthFS7I5G77xQaoLrClaM5BT7ZdGmQ3K8vdrIcPE/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º – Visualize e se estiver tudo certo clique em Salvar Modelo .

PopUp em Janela para Assinar Feed

<link media="screen" rel="stylesheet" href="http://dl.dropbox.com/u/44914301/codigos/colorbox.css" />

Posted by: Elvis Alves

Postar um comentário

0 Comentários

Menu

Arquivo do Blog

Rodapé

Texto Personalizado

Marcadores

Postagens Populares

Os 5 sites adulto mais visitados do mundo

10 Sites Seguros Para Fazer Compras Online

Como baixar filmes do Redtube sem programa

Dicas de Como Ganhar na Lotofacil

Crie Seu Blog de Jogos Online

Menu Footer Widget

Contact form

PopUp em Janela para Assinar Feed

<link media="screen" rel="stylesheet" href="http://dl.dropbox.com/u/44914301/codigos/colorbox.css" />

Posted by: Elvis Alves

Postar um comentário

0 Comentários

Menu

Arquivo do Blog

Rodapé

Texto Personalizado

Social Plugin

Marcadores

Postagens Populares

Os 5 sites adulto mais visitados do mundo

10 Sites Seguros Para Fazer Compras Online

Como baixar filmes do Redtube sem programa

Dicas de Como Ganhar na Lotofacil

Crie Seu Blog de Jogos Online

Menu Footer Widget

Contact form