domingo, 14 de junho de 2015

Elegant Poup up subscribe feedburner

subscribe-popup-blogger


Hoje vamos apresentar esse lindo poup up para ser adiconado a seu blogger esse é mais profissional  isso aparece uma vez e depois cada 7 dias para o usuario é muito util não é chato aqueles que ficam toda hora aparecendo por isso é muito bom alem de ser mais atraente.


Para adicionar esse poup up subscrição siga os passos

Faça Login no blogger va em modelo >>  editar  html
procure por </head>  copie o codigo abaixo e cole acima

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://codingcrazy.com/demo/cookie.js"></script>

Então procure por </body> e coloque o codigo abaixo acima disso

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#popupcc{   background:url('http://4.bp.blogspot.com/-6nW7fK26v0Q/VO4CHaK134I/AAAAAAAAKCM/vVOfX9BsHoA/s1600/overlay.png');position:fixed;z-index: 9999990;width:100%;color:#fff;    height:100%;top:0;font-family: 'Open Sans Condensed', sans-serif;display:none;}
#main-box {   position:fixed;top:100px;left:50%;margin-left: -265px;padding:15px;background: #353535;   box-shadow: 0px 0px 3px #000;-moz-box-shadow: 0px 0px 3px #000;-webkit-box-shadow: 0px 0px 3px #000;width:500px;height:auto;z-index:9999999;    }
#main-box h2 {   margin:5px;color:#fafafa; text-align:center;font-weight:normal;text-transform:uppercase;    font-family: 'Open Sans Condensed', sans-serif; }
#popup-body h2{text-align:left; width:300px;}
#popup-body h2 img{width:25px; position:relative; right:5px; }
.body-inner{float:left;width:300px;} .popup-image{float:right} .popup-image img{position:relative;top:10px;}
#main-box h2 img {   border:0; position:relative;top:3px; right:5px;}
#main-box-in {   padding:10px; border-radius: 5px;-webkit-border-radius: 5px;   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);    }
#buttonfeed {    width:30%; color: #fff;-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;box-shadow:inset 0px 1px 0px 0px #cf866c;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));    background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);    background-color:#d0451b;-moz-border-radius:3px;-webkit-border-radius:3px;    border-radius:3px;border:1px solid #942911;cursor:pointer;font-size:15px;    padding:9px 2px;text-decoration:none;margin: 5px 0px; font-family: 'Open Sans Condensed', sans-serif;   }
#buttonfeed:hover {background: #d0451b;}
#boxfeed {outline: none;padding:10px 2%;width:60%;-moz-boder-radius:3px;-webkit-border-radius:3px;border-radius:3px;background: #333;    color: #fafafa;font-size:15px;   border: 1px solid #333;    box-shadow: inset 0 0 3px #000;    -moz-box-shadow: inset 0 0 3px #000;-o-box-shadow: inset 0 0 3px #000;-webkit-box-shadow: inset 0 0 3px #000;    font-family: 'Open Sans Condensed', sans-serif;   }
#main-box a {   margin:5px;color:#fff;text-decoration:none;text-transform:uppercase;   }
#main-box a img {   position:relative;    right:3px;    top:2px;border:0;   }
#creditcc {   width:200px;padding:5px;margin:auto;text-align:center;   }
</style>
<div id="popupcc">
<div id="main-box">
<div id="main-box-in">
<h2><img src="http://4.bp.blogspot.com/-X5enr3zGaVE/VWiuBUIc35I/AAAAAAAAKEg/k4y2_LREknY/s1600/634c55_2bf916eeff084210a1d8970bcebc3aaa.png" width="32px" />Subscribe to us</h2>
<div id="popup-body">
<div class="body-inner">
<h2><img src="http://3.bp.blogspot.com/-jwtvemW3X6M/VW3i8cK_gfI/AAAAAAAAKGU/0r88fuxtKwI/s1600/check-mark-11-256.png" />100% Free.</h2>
<h2><img src="http://3.bp.blogspot.com/-jwtvemW3X6M/VW3i8cK_gfI/AAAAAAAAKGU/0r88fuxtKwI/s1600/check-mark-11-256.png" />No Spamming.</h2>
<h2><img src="http://3.bp.blogspot.com/-jwtvemW3X6M/VW3i8cK_gfI/AAAAAAAAKGU/0r88fuxtKwI/s1600/check-mark-11-256.png" />Unsubscribe anytime.</h2>
</div>
<div class="popup-image">
<img src="http://3.bp.blogspot.com/-en8MF8uI-tA/VW3hj9NIzqI/AAAAAAAAKGM/lfbc0rARKus/s1600/Email_icon.png" />
</div></div>
<!--The Subscribtion Box. Make sure you edit it before saving-->
<center><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=mybloggerseo" , "popupwindow", &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='mybloggerseo'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput' id='boxfeed' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email'/>
<input id='buttonfeed' type='submit' value='Subscribe'/>
</form></center>
<div id="creditcc">
<a href="http://www.mybloggerseo" target="_blank"><img src="http://3.bp.blogspot.com/-tjT8VMGsHa8/VWixkOfsN4I/AAAAAAAAKEs/HV-ePrRr1UU/s1600/Download_icon.png" width="12px" />Get It</a>~ <a href="JavaScript:void(0)" id="closecc"><img src="http://4.bp.blogspot.com/-n5Xshozx_qE/VWixkZ9Si_I/AAAAAAAAKEo/S0sVOG35Ag8/s1600/icon-close.png" width="15px"/>close</a>
</div>
</div><!--Main in-->
</div><!--main-box-->
</div>


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner