.gif "Cuanto Quieres Ganar Tu Eliges la Cantidad DonInfinity")
HablaChento viene con todo con este tutorial para colocarle a tu Blog o Web una ventana POP-UP de suscripciones de Feedburner de Google 2015 - 2016, acá te explicare como puedes colocar el estilo de la ventana y el HTML para que se vea en una sola entrada o tema de tu Blogger o en la página principal del Blog.
Esta versión es echa por HablaChento para el año 2015 y 2016.
DEMO: AQUI
Colocar este código antes del </head>
<!-- Comienzo Style de la ventana pop de suscripcion a mano derecha! -->
<style type='text/css'>
/*!
* Fix for Brightcove bug for IE 8-9 (video object inserted in a span element with style="display: inline-block")
*/span[id^="_containermyExperience"]{display:block!important}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,input{margin:0;padding:0;line-height:18px}table{border-collapse:collapse;border-spacing:0}p{margin:9px 0}fieldset,img{border:0}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0}legend{display:none}a:active{outline:0}a:focus{-moz-outline-style:none}html{font-size:62.5%}body{font-family:Tahoma,Arial,Verdana,sans-serif;font-size:13px;font-size:1.3rem;line-height:16.9px;line-height:1.69rem;background-color:#e6e9ea;color:#333}h1,
.size-h1{font-family:"OpenSansCondensedBold","Arial Narrow",Tahoma,sans-serif;font-weight:bold;font-size:40px;font-size:4rem;line-height:44px;line-height:4.4rem}h2,
.size-h2{font-family:"OpenSansCondensedBold","Arial Narrow",Tahoma,sans-serif;font-weight:bold;font-size:30px;font-size:3rem;line-height:39px;line-height:3.9rem}h3,.size-h3{font-family:"OpenSansCondensedBold","Arial Narrow",Tahoma,sans-serif;font-weight:bold;font-size:21px;font-size:2.1rem;line-height:27.3px;line-height:2.73rem}h4,.size-h4{font-family:"OpenSansCondensedLight","Arial Narrow",Tahoma,sans-serif;font-size:21px;font-size:2.1rem;line-height:27.3px;line-height:2.73rem}div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,p,blockquote,th,td,input{line-height:18.2px;line-height:1.82rem}a{color:#2a435f;text-decoration:none}a img{-moz-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out}a:hover{text-decoration:underline}a:hover img{*zoom:1;filter:alpha(opacity=80);opacity:.8}p a{color:#006bc1}button{margin:0}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}select{font-family:Tahoma,Arial,Verdana,sans-serif;font-size:12px;font-size:1.2rem}blockquote{position:relative;padding:4px 4px 4px 48px}blockquote:after{position:absolute;top:32px;left:4px;content:"\201C";color:#2a435f;font-family:Georgia,Arial,serif;font-size:80px;font-size:8rem}div{overflow:hidden;width:auto}.js-hidden{display:none}.scrambled_email{unicode-bidi:bidi-override;direction:rtl}#container{position:relative;z-index:100;display:block;overflow:visible;margin:4px auto 0;width:980px;background-color:white;-moz-box-shadow:0 2px 10px #aaa;-webkit-box-shadow:0 2px 10px #aaa;box-shadow:0 2px 10px #aaa}#content,#main_navigation,#searchbar_top{position:relative;display:block;clear:both;overflow:hidden;margin:0 auto;width:auto;background:white}#content{padding:16px 0 48px;overflow:visible}#content,#internal_promo_content,#static_content{border-bottom:1px dotted #ccc}.firstbar,.secondbar{overflow:visible}#content_3col,#content_2col_left,#content_2col_right,#content_2col,#content_3col_equals,#content_2col_left_big{position:relative;display:block;clear:both;overflow:visible;width:100%}#content_3col .firstbar{position:relative;z-index:10;float:left;overflow:visible;padding:0 16px 0 0;width:186px}#content_3col .topbar{float:left;width:772px}#content_3col .mainbar{position:relative;float:left;padding-right:16px;width:462px}#content_3col .secondbar{position:relative;float:left;clear:right;width:300px;z-index:10}#content_3col_equals .firstbar{float:left;clear:left;margin-right:16px;width:310px}#content_3col_equals .mainbar{float:left;margin:0;width:310px}#content_3col_equals .secondbar{float:right;clear:right;margin-top:47px;width:310px}#content_2col_left .firstbar{position:relative;float:left;clear:left;overflow:hidden;padding:0 16px 0 0;width:186px}
.nav-item-icons span{position:absolute;text-indent:-9999em}.corporative-header .nav-item-user-logout i{margin-top:-4px;vertical-align:middle}.corporative-header .js-open-search-active{height:47px}.corporative-header .js-open-search-active,.corporative-header .js-open-search-active:hover{background-color:#eaeaea}.corporative-header .js-open-search-active i{color:#1a87d7}.corporative-header .js-user-login-active,.corporative-header .js-user-login-active:hover{background-color:#dceefb}.corporative-header .js-user-login-active i{color:#1a87d7}.corporative-header .nav-item-user-name{max-width:55px;padding:0 2px 0 8px;font-weight:bold;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.corporative-header .box-opinion-balloon-bottom:before{position:absolute;width:0;height:0;content:"";bottom:-34px;left:31px;border-style:solid;border-color:#83a05b transparent;border-width:34px 0 0 34px}.multi-search-box{position:relative;width:550px;height:34px;margin:4px 0;background-color:white;-moz-box-shadow:inset 2px 2px 1px #b3b3b3;-webkit-box-shadow:inset 2px 2px 1px #b3b3b3;box-shadow:inset 2px 2px 1px #b3b3b3}.multi-search-box .search-input{float:left;width:360px;height:26px;line-height:28px;padding:0 16px;margin:4px;border:0}.multi-search-box button{position:absolute;top:0;left:566px;height:34px;padding:0 16px;border:0;white-space:nowrap;font-family:"OpenSansCondensedLight","Arial Narrow",Tahoma,sans-serif;background:#1a87d7;color:white;cursor:pointer;font-size:21px;font-size:2.1rem;line-height:34px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;
background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(45%,#1a87d7),color-stop(60%,#1670b3));background:-moz-linear-gradient(#1a87d7 45%,#1670b3 60%);background:-webkit-linear-gradient(#1a87d7 45%,#1670b3 60%);background:linear-gradient(#1a87d7 45%,#1670b3 60%);*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF1A87D7',endColorstr='#FF1670B3')}.multi-search-box .text_container,
.form-default .label-inline{display:inline;font-family:Tahoma,Arial,Verdana,sans-serif;cursor:pointer}
.form-default .label-inline-explanation{padding-left:22px}
.form-default input[type="email"],
.form-default select{width:100%;margin-right:8px;padding:8px;border:1px solid #aaa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.form-default input[type="email"]:focus,
.form-default input[type="text"].field-m,
.list-program-language{font-size:14px;font-size:1.4rem;line-height:18.2px;line-height:1.82rem}
.list-program-rating-editor dt,
.list-program-rating-user dt{font-family:"OpenSansCondensedBold","Arial Narrow",Tahoma,sans-serif;font-size:25px;font-size:2.5rem;line-height:32.5px;line-height:3.25rem}
.list-program-title{padding-bottom:4px}
.list-program-title{font-family:"OpenSansCondensedBold","Arial Narrow",Tahoma,sans-serif;font-size:25px;font-size:2.5rem;line-height:32.5px;line-height:3.25rem}
.list-program-title span{font-family:"OpenSansCondensedLight","Arial Narrow",Tahoma,sans-serif;color:#999;font-size:16px;font-size:1.6rem;line-height:20.8px;line-height:2.08rem}
.list-program-icon{position:absolute;left:0;top:16px}
.list-program-icon img{display:block;margin:0 16px}
.list-program-description{margin:0}
.list-program-category,
.pulldown-select span{display:block;padding:4px 32px 4px 8px;border-width:2px 2px 1px 1px;border-style:solid;border-color:#aaa;background-color:white;color:black;cursor:pointer}.pulldown-select i{position:absolute;right:16px;top:8px;color:#1a87d7}.pulldown-select .list-pulldown,.pulldown-select .tabs ul.list-pulldown-countrys,.tabs .pulldown-select ul.list-pulldown-countrys{min-width:190px}.pulldown-label{float:left;margin:5px 8px 0 0;font-size:14px;font-size:1.4rem}.list-pulldown,.tabs ul.list-pulldown-countrys,.list-pulldown-platforms,.list-pulldown-languages{position:absolute;display:none;z-index:2000;font-family:Tahoma,Arial,Verdana,sans-serif;font-size:12px;font-size:1.2rem;line-height:15.6px;line-height:1.56rem;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.2);box-shadow:3px 3px 3px rgba(0,0,0,0.2)}.list-pulldown li,.tabs ul.list-pulldown-countrys li,.list-pulldown-platforms li,.list-pulldown-languages li{border-bottom:1px dotted #aaa}.list-pulldown li:last-child,.tabs ul.list-pulldown-countrys li:last-child,.list-pulldown-platforms li:last-child,.list-pulldown-languages li:last-child{border-bottom-width:0}.list-pulldown a,.tabs ul.list-pulldown-countrys a,.list-pulldown-platforms a,.list-pulldown-languages a{display:block;padding:5.33333px 16px}.list-pulldown a:hover,.tabs ul.list-pulldown-countrys a:hover,.list-pulldown-platforms a:hover,.list-pulldown-languages a:hover{background-color:#79b8e5;color:white;text-decoration:none}.list-pulldown,.tabs ul.list-pulldown-countrys{border:4px solid #1a87d7;background-color:white}.tabs ul.list-pulldown-countrys{left:12px;display:none;overflow:auto;width:190px;max-height:200px;padding:0}.tabs ul.list-pulldown-countrys span{display:block;overflow:hidden;padding:8px 16px 8px 42px;cursor:pointer}.tabs ul.list-pulldown-countrys li{display:block;float:none}.tabs ul.list-pulldown-countrys li:hover{background-color:#79b8e5;color:white}.list-pulldown-platforms,.list-pulldown-languages{overflow:visible;left:-2px;border:2px solid #1a87d7;border-top:0;background-color:#dceefb;white-space:nowrap}.list-pulldown-languages{width:100%;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.list-pulldown-platforms a{padding-left:32px}
.section_title.closed,#category_mobile_list_set #categories_nav .section_title.closed{background-position:2px -454px}.standar_nav,.standar_nav ul,.standar_nav ul li{overflow:visible}#categories_nav .standar_nav .submenu{position:absolute;top:-2px;left:185px;z-index:100;width:150px;border:2px solid #9fafc0;background-color:whitesmoke;-webkit-box-shadow:0 5px 10px #666;-moz-box-shadow:0 5px 10px #666}#categories_nav .standar_nav .open li.on a:hover,#categories_nav ul li.open_on ul li:hover,#categories_nav ul .open ul li.open_on ul li:hover,#categories_nav ul .open ul li.open_on a.on:hover{background:#79b8e5;color:white;text-decoration:none}#categories_nav ul .open .open ul li:hover{position:relative;overflow:hidden;background:#79b8e5;color:white}#categories_nav ul .open .open ul li:hover a{color:white}#categories_nav .more_info{padding-left:8px}
.all-about-hablachento-btn{height:36px;padding:0 20px;border:1px solid #8a9d25;border-radius:4px;white-space:nowrap;box-shadow:none;background:#b2cb31;color:#fff;font-family:arial,Tahoma,sans-serif;filter:none;cursor:pointer;font-size:18px;font-size:1.8rem;line-height:23.4px;line-height:2.34rem}[class^="button-standard"]{display:inline-block;padding:2px 16px;margin:4px 16px 4px 0;
border:1px solid #aaa;font-family:"OpenSansCondensedLight","Arial Narrow",Tahoma,sans-serif;color:black;vertical-align:middle;cursor:pointer;line-height:32.5px;line-height:3.25rem;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.2);box-shadow:3px 3px 3px rgba(0,0,0,0.2);
background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(45%,#f2f2f2),color-stop(55%,#e2e2e2));background:-moz-linear-gradient(#f2f2f2 45%,#e2e2e2 55%);background:-webkit-linear-gradient(#f2f2f2 45%,#e2e2e2 55%);background:linear-gradient(#f2f2f2 45%,#e2e2e2 55%);*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFF2F2F2',endColorstr='#FFE2E2E2')}[class^="button-standard"]:hover{text-decoration:none}[class^="button-standard"] i{display:inline-block;margin:-2px 0 0 8px;vertical-align:middle}[class^="button-standard"]
.icon-question-sign{color:#1a87d7}[class^="button-standard"]
.send-compare-both [class^="button-standard"]{position:relative}
.send-compare-both [class^="button-standard"]:before,
.icon-close:before{content:"\e612"}
.tooltip-opinion{border:2px solid #83a05b;background-color:#ebefe4}.tooltip-opinion
.ov-pointer{background-position:-262px -1173px}.popup-logo{display:block;width:152px;height:36px;
background-size:contain;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTO8-6G_89bivJrCSDHLeLBqBk6qxpcZHW79xFpe5G7lx70k0SOxK7mafyWBfUDPRRf2v2FBqD0y9J-JbdPd9FEoiF5Xx1e6RpL9SCP4SE22-bCsoCu22tgu9B9A8nyNAoCpJ_OzjeqI/s1600/logo-hablachento.png);
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTO8-6G_89bivJrCSDHLeLBqBk6qxpcZHW79xFpe5G7lx70k0SOxK7mafyWBfUDPRRf2v2FBqD0y9J-JbdPd9FEoiF5Xx1e6RpL9SCP4SE22-bCsoCu22tgu9B9A8nyNAoCpJ_OzjeqI/s1600/logo-hablachento.png),none}.modal-window{overflow:visible;border:4px solid #909090;background:white;-moz-box-shadow:8px 8px 32px black,-8px -8px 32px black;-webkit-box-shadow:8px 8px 32px black,-8px -8px 32px black;box-shadow:8px 8px 32px black,-8px -8px 32px black}.modal-window .ov-cross{top:-13px;right:-13px}.modal-window .video-frame{border:0}.popup-header{padding:8px 48px 8px 32px;
background:#1a87d7}.popup-logo{float:left;margin:-2px 0 4px -8px}.popup-title{font-family:"OpenSansCondensedLight","Arial Narrow",Tahoma,sans-serif;font-size:21px;font-size:2.1rem;line-height:39px;line-height:3.9rem;color:white}.popup-content{padding:16px 32px}.popup-content-title{font-size:25px;font-size:2.5rem;line-height:32.5px;line-height:3.25rem;color:#2a435f}.ov_modal_bkgnd_layer{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:black;z-index:100;*zoom:1;filter:alpha(opacity=80);opacity:.8}.ov_reset{display:block;position:absolute;margin:0;top:-10000px;left:-10000px}.ov_content{display:none}
.ov-cross{position:absolute;
top:-10px;right:-10px;z-index:10;
display:block;width:20px;
height:20px; no-repeat 0 -2324px;text-indent:-9999em;cursor:pointer}
.ov-s{width:250px}
.ov-m{width:500px}
.ov-l{width:750px}
.popup-window-bottom{position:fixed;z-index:1000;
bottom:0;right:15px;width:448px;background-color:#fff;border:1px solid #145f96;border-bottom:0;-moz-box-shadow:0 0 0 15px rgba(0,0,0,0.15);
-webkit-box-shadow:0 0 0 15px rgba(0,0,0,0.15);box-shadow:0 0 0 15px rgba(0,0,0,0.15)}
.popup-window-bottom
.ov-cross{top:8px;right:15px;line-height:normal;text-indent:0;color:#fff;background:0;text-decoration:none;font-size:22px;font-size:2.2rem}.popup-window-bottom .popup-title{font-weight:normal;line-height:40px}.all-about-hablachento-popup .form-default{overflow:hidden;padding:10px 32px 16px}.all-about-hablachento-popup .form-default input.field-xl{width:100%;margin:0;height:36px;padding:0 8px 0;display:table-cell;box-shadow:none;font-size:18px;font-size:1.8rem;line-height:23.4px;line-height:2.34rem}.all-about-hablachento-popup .form-default input.field-xl:focus{border:1px solid #aaa;outline:0}
.all-about-hablachento-popup
.popup-header{padding:0 32px 0 10px}.all-about-hablachento-popup .popup-logo{height:32px;width:142px;margin:2px 0 0}.all-about-hablachento-popup .popup-content{color:#39393e;font-family:"OpenSansCondensedLight","Arial Narrow",Tahoma,sans-serif;padding:0;margin:16px 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0cO5Hp7cnGeHThmua78hFY7ePiOV80W-vaJ_Vig95PPmpme4bXg83FhgXAasTxwj41J1-RTD6Rc8MrKqdg13taCZJxN6QzUzvVdA3-YwUIQm_xU0eMfW6k7VA8EHW8LkPQBdIXGDX0VY/s1600/boletines-hablachento-1.png) 0 5px no-repeat}
.all-about-hablachento-popup .popup-content-title{line-height:1;margin-left:120px;color:#333;font-size:23px;font-size:2.3rem;line-height:.9}.all-about-hablachento-popup .popup-content-title span{color:#b2cb31;font-size:28px;font-size:2.8rem;line-height:36.4px;line-height:3.64rem}.all-about-hablachento-popup .popup-subtitle{margin:3px 0 0 120px;font-size:16px;font-size:1.6rem;line-height:20.8px;line-height:2.08rem}.all-about-hablachento-popup .standard-register-validate-email{background:0;width:auto;padding:0;margin:2px 0 0}.all-about-hablachento-popup .standard-register-validate-email>p{color:inherit;font-family:arial;font-weight:normal;font-size:13px;font-size:1.3rem;line-height:16.9px;line-height:1.69rem}.all-about-hablachento-popup .subscribe-confirm-title{font-size:20px;font-size:2rem;line-height:26px;line-height:2.6rem;margin-left:120px}.all-about-hablachento-popup .subscribe-email-sent{margin:10px 0 24px 120px}.all-about-hablachento-popup .subscribe-email-sent strong{display:block}.all-about-hablachento-popup .subscribe-email-sent a{display:block;max-width:20%;color:#1a87d7}.all-about-hablachento-popup .icon-remove{margin:-1px 0 0 5px;vertical-align:middle;font-size:80%}.all-about-software-privacy-policy{margin:6px 0 0;font-size:11px;font-size:1.1rem;line-height:14.3px;line-height:1.43rem}.all-about-software-privacy-policy a{color:inherit;text-decoration:underline}
.all-about-hablachento-form-items{display:table}.all-about-software-btn{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}
.all-about-hablachento-wrapper-btn{display:table-cell;width:1%;vertical-align:top}
.survey-popup
.popup-header{padding:0 32px 0 10px}.survey-popup .popup-logo{height:32px;width:142px;margin:2px 0 0}
.survey-popup
.popup-content{color:#39393e;font-family:"OpenSansCondensedLight","Arial Narrow",Tahoma,sans-serif;padding:0;margin:16px 32px}.survey-popup h2{line-height:1;color:#333;font-size:23px;font-size:2.3rem;line-height:.9}
.survey-popup p{margin:16px 0;font-size:16px;font-size:1.6rem;line-height:20.8px;line-height:2.08rem}
.survey-popup ul{text-align:center}
.survey-popup ul li{display:inline;margin:0 32px}
</style>
<!-- Finalizacion Style de la ventana pop de suscripcion a mano derecha! -->
Este código lo vas a colocar en la entrada o tema que desees que se vea únicamente allí o nos vamos a la pestaña diseño y luego añadir un gadget:
<div id="popup-newsletter-hablachento" class="popup-window-bottom all-about-hablachento-popup">
<div class="popup-header">
<a title="Página principal de HablaChento" href="http://hablachento.blogspot.com" class="popup-logo"></a>
<h3 class="popup-title">Newsletter</h3> </div>
<a title="Cerrar" href="#" class="ov_close ov-cross icon-close" tabindex="49"></a>
<div id="popup-newsletter-content" class="popup-content">
<h2 class="popup-content-title"><span>Descubre</span> las últimas noticias y novedades del mundo, en un solo Blog HablaChento!</h2>
<p class="popup-subtitle">¡No te pierdas nuestros tips & consejos!</p>
</div>
<form id="popup-newsletter-form" class="form-default" action="https://feedburner.google.com/fb/a/mailverify" data-verify-hash-url="verify-hash" data-url-subscription-confirm="https://feedburner.google.com/fb/a/mailverify?uri=BienvenidosAHablachento">
<div class="all-about-hablachento-form-items">
<input id="popup-newsletter-email" placeholder="Dirección de e-mail" class="field-xl" tabindex="1" name="email" required="" type="email" />
<div class="all-about-hablachento-wrapper-btn">
<button type="submit" class="all-about-hablachento-btn" tabindex="2">Suscribirse</button></div>
</div>
<p class="all-about-software-privacy-policy">
Al hacer clic en el botón, acepto la <a href="https://www.google.com/policies/privacy/" target="_blank">Política de privacidad</a>. </p>
<input name="uri" value="BienvenidosAHablachento" type="hidden" />
<input name="loc" value="es_ES" type="hidden" />
</form></div>
0 comentarios:
Publicar un comentario