Para añadir este truco solo debes pegar el siguiente codigo como un gadget (en HTML/JavaScript):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">.subscribe:hover{opacity:0.8} #subscribe-button{background:url(https://lh6.googleusercontent.com/-QyMynCqQVHk/UBbF11mYi9I/AAAAAAAAFEk/20wSyGCxLEM/s150/rss-email.png)top left;padding-top:15px;width:150px;height:150pxfloat: center;position:relative;z-index: 999;}#subscribe-widget{display:none;}#subscribe-widget{display:none;}/* Overlay */ #hb-overlay{background-color:#000;}/* Container */ #hb-container{min-height:350px;min-width:500px;color:#222;background-color:#fff;border:4px solid #ddd;}#hb-container .hb-data{padding:8px;}#hb-container a.hbCloseImg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSqSz2z_FCwSeOqVqi_rP3heVDtYgFT7-dv-9P8KZRb5uq43F7tmelkhoVZO04fvZpGWjpJuYesVX2TttUDKmYErD_Rxi239TdYk0vWF_XhW5_FICyIzM8Fo9ZOwxhVglfmEdr8cHQIkl/s1600/hb-close-button.png) no-repeat;width:25px;height:29px;display:inline;z-index:3200;position:absolute;top:-15px;right:-16px;cursor:pointer;}#description{color: #000000;font-family: century gothic;font-size: 18px;font-weight: bold;}#description img{float: left;height: 80px;padding: 0 25px 0 10px;width: 80px;}#hbfollowForm{padding: 15px;}#hbfollowForm p{margin: 0 0 10px;}#hbfollowForm input:not([type="checkbox"]){width: 93%;margin-top: 4px;margin-bottom: 20px;padding: 10px 5px 10px 25px;border: 1px solid rgb(178, 178, 178);-webkit-appearance: textfield;-webkit-box-sizing: content-box;-moz-box-sizing : content-box;box-sizing : content-box;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}#hbfollowForm input:not([type="checkbox"]):active, #hbfollowForm input:not([type="checkbox"]):focus{border: 1px solid rgba(91, 90, 90, 0.7);background: rgba(238, 236, 240, 0.2);-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}#hbfollowForm .button input{background: none repeat scroll 0 0 #3D9DB3;border: 1px solid #1C6C7A;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;color: #FFFFFF;cursor: pointer;font-family:'Arial Narrow', Arial, sans-serif;font-size: 24px;margin-bottom: 10px;padding: 8px 5px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);width: 30%;float: right;}#hbfollowForm .button input:hover{background: #4ab3c6;text-decoration: none;}#hbfollowForm .button input:active, #hbfollowForm .button input:focus{background: rgb(40, 137, 154);position: relative;top: 1px;border: 1px solid rgb(12, 76, 87);-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;}.hbFollowFooter{text-align: center;font: 10px Tahoma, Helvetica, Arial, Sans-Serif;padding: 7px 0;margin-top: 80px;text-shadow: 0px 2px 3px #555;position: absolute;width: 500px;}.hbFollowFooter a{color: #222;text-decoration: none;}.hbFollowFooter a:hover{color: #fff;}<!--[if lt IE 7]> #hb-container a.hbCloseImg{background:none;right:-14px;width:22px;height:26px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSqSz2z_FCwSeOqVqi_rP3heVDtYgFT7-dv-9P8KZRb5uq43F7tmelkhoVZO04fvZpGWjpJuYesVX2TttUDKmYErD_Rxi239TdYk0vWF_XhW5_FICyIzM8Fo9ZOwxhVglfmEdr8cHQIkl/s1600/hb-close-button.png', sizingMethod='scale');}#hbfollowForm input{padding: 10px 5px 10px 32px;width: 93%;}#hbfollowForm input[type=checkbox]{width: 10px;padding: 0;}<![endif]--></style><center><div id="subscribe-button"><center><img class="sinborde" src="https://lh3.googleusercontent.com/-IQhukWHWDbE/UBbByDBM_DI/AAAAAAAAFEM/_FF-uJrIkGU/s143/rw2lNY1343666496.png"></center><a class="subscribe" href="#"><img class="sinborde" src="https://lh5.googleusercontent.com/-4eMrV7U_Ytg/UBbA-nJ4kZI/AAAAAAAAFEE/Qe1_YMnOQQc/s105/botazul1.png" height="105" width="105"></a></div></center><div id="subscribe-widget"><div id="hbfollowForm"><img alt="Subscribe" border="0" float="center" src="https://lh5.googleusercontent.com/-YDC0_v-IbSw/UBaxHvKcgZI/AAAAAAAAFDM/HjEWrz-O1XY/s448/suscribete%2520-%2520REDEANDO.png" /><div id='description'><img alt="email" border="0" src="https://lh3.googleusercontent.com/-flTg-BUd4eA/UBayghaGXcI/AAAAAAAAFDU/4fRlrLONv-Y/s134/iconoemail%2520-%2520REDEANDO.PNG" />Suscribete y recibe las ultimas actualizaciones de este blog en tucorreo electronico.</div><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Redeando', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="email" placeholder="Escribe tu Email..." required="required" type="text" /><input name="uri" type="hidden" value="NOMBRE" /><input name="loc" type="hidden" value="es_ES" /><div class="button"><input type="submit" value="Enviar" /></div></form></div><div class="hbFollowFooter">Un widget de <a href="http://redeando.blogspot.com" target="_blank">REDEANDO</a></div></div><script src="http://hostredeando.ucoz.es/js/jquery-popup.js"type="text/javascript"></script><script type="text/javascript">jQuery(function(a){a("#subscribe-button .subscribe").click(function(b){a("#subscribe-widget").modal();return false})})</script>
Ahora cambia lo que esta en rojo por el nombre de tu blog y listo.
Via/Redeando
0 Komentar untuk "Boton de suscripción por correo con ventana modal"