TẠO WIDGET ĐĂNG KÍ NHẬN BÀI VIẾT QUA EMAIL CỰC ĐẸP CHO BLOGSPOT
CÁCH THỰC HIỆN
Bước 1. Chèn CSS vào trước thẻ]]></b:skin>#sub-box{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%)}
Bước 2. Chèn HTML vào trước thẻ
</body> hoặc sau thẻ <body> (trường hợp blog không có thẻ <body> thì tìm <body là ra nhé).<div id='sub-box'>
<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=bacsiwindowsdotcom' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bacsiwindowsdotcom, '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='Tên bạn' type='text' value='Tên bạn'/>
<input name='email' onblur='if (this.value == "") {this.value = "Địa chỉ Email";}' onfocus='if (this.value == "Địa chỉ Email") {this.value = "";}' placeholder='Địa chỉ Email' type='text' value='Địa chỉ Email'/>
<input name='uri' type='hidden' value='bacsiwindowsdotcom'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Đăng ký'/>
</form></div></div>
<div id='subscribe_box-bsw-v5'><h2>Subscribe box</h2> <p>Nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được bài viết mới nhất từ Bác Sĩ Windows hoàn toàn miễn phí qua inbox!!
</p></div>
</div></div>
Bước 3. Chèn Javascript vào trước thẻ
</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"){$("#sub-box").delay(0).fadeIn("10000");$("#closebox, #boxclose").click(function(){$("#sub-box").stop().fadeOut("10000");});}});
</script>
Bước 4. Chỉnh sửa các thành phần in đậm lại cho phù hợp và lưu mẫu.
BỔ SUNG
Nếu trong Template bạn chưa có thư viện jQuery thì phải thêm đoạn này vào sau thẻ <head> nhé. Nhưng đa số Template bây giờ đều có sẵn rồi nên bạn không cần thêm nữa, kẻo lại xung đột.<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js'/>
LỜI KẾT
Vậy là mình đã chia sẻ đến các bạn mẫu subscribe box dạng popup tuyệt đẹp này. Trong quá trình thực hiện có lỗi gì hoặc không thực hiện được thì hãy bình luận xuống bên dưới để mình giúp đỡ nhé.
Nguồn : Bác Sĩ WINDOWS
TẠO WIDGET ĐĂNG KÍ NHẬN BÀI VIẾT QUA EMAIL CỰC ĐẸP CHO BLOGSPOT
Reviewed by Lê Anh Đức
on
tháng 1 04, 2018
Rating:
Reviewed by Lê Anh Đức
on
tháng 1 04, 2018
Rating:
Không có nhận xét nào :
Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Để bình luận một đoạn code, hãy mã hóa code trước nhé