Create a Beautiful Popup Email Subscription for Blogger
 |
| Create a Beautiful Popup Email Subscription for Blogspot |
Create a Beautiful Popup Email Subscription for Blogspot
The situation is that we have just received the good news tomorrow of being absent from school due to the impact of the storm. So now I have time to sit and write tips for your blog:
Today's article I will share to you the popup form to register to receive articles via email, the popup will appear in the middle of the screen when you access. go to the blog.
This is a trick to use CSS and Javascript to perform, watch and execute it!
Steps to follow
Step 1. Access to edit HTML.
Step 2. Insert CSS before the tag ]]></b:sin>
#subscriberbox-by-thugsofbd{display:none;background:rgba(0,0,0,0.3);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}
#boxclose{width:100%;height:100%;-webkit-transform:translateZ(0)}
#boxview{border:8px solid rgba(255,255,255,.1);box-shadow:0 0 30px rgba(0,0,0,.15);width:700px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#closebox{float:right;cursor:pointer;position:absolute;right:0;top:0;display:none}
#closebox:before{font-family:FontAwesome;content:'\f00d';padding:5px 8px;background:#fff;color:#2c3e50;font-weight:normal;font-size:14px;border-radius:0 0 0 10px}
#bsw_subscribe-box-v5{float:left;width:400px;height:200px;background:linear-gradient(120deg,#7577a9,#6d9698);position:relative}
#bsw_subscribe-box-v5 .emailfield{padding:25px}
#bsw_subscribe-box-v5 .emailfield input{background:0;color:rgba(255,255,255,.5);padding:10px 0;margin:0 auto 10px;font-size:14px;font-family:'Roboto',sans-serif;font-weight:300;width:70%;text-align:center;border-bottom:1px solid rgba(255,255,255,.15);border-top:0;border-left:0;border-right:0;outline:0;text-transform:uppercase;letter-spacing:2px;display:table;transition:.5s}
#bsw_subscribe-box-v5 .emailfield input:focus::-webkit-input-placeholder{opacity:0.5}
#bsw_subscribe-box-v5 .emailfield .submitbutton{background:#fff;color:#7184a1;text-transform:uppercase;font-weight:500;font-size:18px;border:none;outline:none;cursor:pointer;margin:20px auto 0;letter-spacing:1px;width:200px;border-radius:4px}
#bsw_subscribe-box-v5 .emailfield .submitbutton:hover{opacity:.8}
#bsw_subscribe-box-v5 .emailfield input::-webkit-input-placeholder{color:rgba(255,255,255,.7)}
#subscribe_box-bsw-v5{float:right;width:300px;height:200px;background:#fff;position:relative;text-align:center}
#subscribe_box-bsw-v5 h2{padding:15px;text-transform:uppercase;letter-spacing:1px;color:#737da6;border-bottom:double;display:table;margin:0 auto 20px}
#subscribe_box-bsw-v5 p{padding:0 20px;line-height:1.5;margin:0;letter-spacing:0.3px;color:#656}
#subscribe_box-bsw-v5:after{border-left:20px solid transparent;border-right:20px solid #fff;border-top:20px solid transparent;border-bottom:20px solid transparent;content:'';bottom:50%;position:absolute;left:-40px;margin:0;transform:translate(0,50%)}
Step 3. Insert HTML after tag <body
<div id='subscriberbox-by-bacsiwindows'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='bsw_subscribe-box-v5'>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=thugsofbd' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=thugsofbd, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='name' onblur='if (this.value == "") {this.value = "Tên bạn";}' onfocus='if (this.value == "Tên bạn") {this.value = "";}' placeholder='Your name' type='text' value='Your name'/>
<input name='email' onblur='if (this.value == "") {this.value = "Địa chỉ Email";}' onfocus='if (this.value == "Email address") {this.value = "";}' placeholder='Email address' type='text' value='Địa chỉ Email'/>
<input name='uri' type='hidden' value='thugsofbd'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Registration'/>
</form></div></div>
<div id='subscribe_box-bsw-v5'><h2>Subscribe box</h2> <p>Enter your email address and click register, you will receive the latest article from ThugsofBD completely free via inbox !!
</p></div>
</div></div>
Step 4. Insert Javascript before the tag </head>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){if($.cookie("popup_facebook_box")!="yes"){$("#subscriberbox-by-bacsiwindows").delay(0).fadeIn("10000");$("#closebox, #boxclose").#click(function(){$("#subscriberbox-by-bacsiwindows").stop().fadeOut("10000");});}});
</script>
Step 5. Save the template.
This is a beautiful Popup Widget designed by Windows Doctor for Blogspot, apply it to revamp your Blog even more beautiful and professional offline!
THÔNG TIN THANH TOÁN & DỊCH VỤ:
- Tên tài khoản: Nguyễn Anh Tuấn
- Số tài khoản: 0501000058467
- Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
- Hỗ trợ cài đặt: fb.com/kequaduongvodanh
- Dịch vụ: Xem chi tiết >>
+ Nhận convert template từ Wordpress
+ Sửa lỗi, nâng cấp template
+ Thiết kế Form Liên hệ từ Google Form
