quinta-feira, 25 de agosto de 2016

Mailchimp subscribe box show on scroll widget

mailchimp-subscribe-box-show-onscroll-with-cookie


Mailchimp subscribe box show on scroll widget é um widget diferente por kompiajaib ele é utilizado para quando queremos compartilhar mensagens de forma automatizada aos nossos leitores para oferecer o serviço de assinatura onde podemos distribuir o nosso melhor conteúdo então veja abaixo como adicionar o widget, 


Como adicionar mailchimp subscribe box show onscroll with cookie

Faça login no blogger no menu procure por modelo então
Editar  HTML/JavaScript com as teclas combinadas CTRL+F busque por: </head> então adicione o seguinte código:

<style type='text/css'>
/*<![CDATA[*/
#site-subs{display:block;padding:15px;background:#fff;border:1px solid #dedede;border-right:0;border-bottom:0;border-radius:5px 0 0;position:fixed;bottom:0;right:0;-webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);-moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);z-index:1000000}
#mc_embed_signup{clear:left;font:16px Helvetica,Arial,sans-serif;width:100%}
#mc_embed_signup .button,#mc_embed_signup input.email{box-sizing:border-box;height:42px;line-height:42px;width:100%}
#mc_embed_signup form{text-align:left;padding:0}
.mc-field-group{display:inline-block}
#mc_embed_signup input.email{font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;font-size:.9em;border:1px solid #ABB0B2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#343434;background-color:#fff;padding:0 .8em;display:inline-block;margin-bottom:10px;vertical-align:top}
#mc_embed_signup .button:active,#mc_embed_signup .button:focus,#mc_embed_signup input.email:active,#mc_embed_signup input.email:focus{outline:0}
#mc_embed_signup label{display:block;font-size:20px;padding-bottom:10px;font-weight:700;color:#666}
#mc_embed_signup .our,#mc_embed_signup .to{font-family:Georgia;font-weight:400;font-size:22px}
#mc_embed_signup .get{font-family:Georgia;font-weight:400;font-size:16px}
#mc_embed_signup .clear{display:block;width:100%}
#mc_embed_signup .to{font-style:italic}
#mc_embed_signup .button{font-size:.9em;font-weight:700;border:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;letter-spacing:.03em;color:#fff;background-color:#333;padding:0 18px;display:inline-block;margin:0;transition:all .23s ease-in-out 0s}
#mc_embed_signup .button:hover{background-color:#007acc;cursor:pointer}
#mc_embed_signup div#mce-responses{float:left;top:-1.4em;padding:0 .5em;overflow:hidden;width:90%;margin:0 5%;clear:both}
#mc_embed_signup div.response{margin:1em 0;padding:1em .5em .5em 0;font-weight:700;float:left;top:-1.5em;z-index:1;width:80%}
#mc_embed_signup #mce-error-response{display:none}
#mc_embed_signup #mce-success-response{color:#529214;display:none}
#mc_embed_signup label.error{display:block;float:none;width:auto;margin-left:1.05em;text-align:left;padding:.5em 0}
.slideUpbox{-webkit-animation-name:slideUpbox;animation-name:slideUpbox;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideUpbox{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideUpbox{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.close-shareOnscroll{position:absolute;top:-20px;right:10px;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:25px;color:#555;height:25px;line-height:25px;text-align:center;background:#fff;border:1px solid #dedede;border-radius:100%}
/*]]>*/
</style>


Agora procure por </body> e cole o seguinte código antes disso:

<script>
//<![CDATA[
  var appended = false,
  bookmark = document.createElement("div");
  bookmark.id = "subscribeOnscroll";
  bookmark.innerHTML = '<div id="site-subs" class="slideUpbox">\
  <div id="mc_embed_signup">\
    <form action="URL EMBEDDED SIGNUP FORM MAILCHIMP" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>\
      <div id="mc_embed_signup_scroll">\
        <label for="mce-EMAIL">SUBSCRIBE <span class="to">to</span> <span class="our">Our News Letters</span><br/>\
        <span class="get">Get hottest posts into your inbox</span></label>\
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>\
        <div style="position: absolute; left: -5000px;" aria-hidden="true">\
          <input type="text" name="código unico aqui" tabindex="-1" value="">\
        </div>\
        <div class="clear"></div>\
          <input type="submit" value="Subscribe" onclick="hidesubscribebox()" name="subscribe" id="mc-embedded-subscribe" class="button">\
      </div>\
    </form>\
  </div>\
  <div class="close-shareOnscroll" onclick="hidesubscribe()">&#215;</div>\
</div>\
';
function hidesubscribe(){document.getElementById("subscribeOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("subscribeOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("subscribeOnscroll").style.display="none"))};
//]]>
</script>

Faça as alterações no código realçado em amarelo salve e pronto.


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