Tạo Popup đăng ký nhận bài viết qua Email tuyệt đẹp cho Blogspot
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Chào các bạn, chào mừng đã quay trở lại với blog Bác Sĩ Windows.Tình hình là vừa nhận được tin vui ngày mai được nghỉ học/thi do ảnh hưởng của bão. Nên bây giờ mới có thời gian rảnh ngồi viết thủ thuật blog cho các bạn :v
Bài viết hôm nay mình sẽ chia sẻ đến các bạn mẫu popup đăng ký nhận bài viết qua email, popup sẽ hiện ra giữa màn hình khi bạn truy cập vào blog.
Các bước thực hiện
Bước 1. Truy cập chỉnh sửa HTML.Bước 2. Chèn CSS vào trước thẻ
]]></b:sin>#subscriberbox-by-bacsiwindows{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 3. Chèn HTML vào sau thẻ
<body<div id='subscriberbox-by-bacsiwindows'>Bước 4. Chèn Javascript vào trước thẻ
<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>
</head><script type='text/javascript'>Bước 5. Lưu mẫu.
//<![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>
Tổng kết
Đây là mẫu Popup Widget tuyệt đẹp được Bác Sĩ Windows thiết kế dành cho Blogspot, hãy áp dụng để tân trang chu Blog của bạn càng thêm đẹp và chuyên nghiệp nhé!Chúc bạn thành công. Di*me copy mà không ghi nguồn Bác Sĩ Windows là tau thẽo mày nhé!
Copyright © 2017
59 nhận xét:
cmt đầu
Chất
OK :)
(y)
"Di*me copy mà không ghi nguồn Bác Sĩ Windows là tau thẽo mày nhé!"
:v :v
làm cái chuyển hướng đi bsw
Chuyển hướng nào bạn?
Kết câu này "Di*me copy mà không ghi nguồn Bác Sĩ Windows là tau thẽo mày nhé!"
:v ghê chưa
tắt máy về ngủ nhanh lạc trôi di đâu đây :v
chueyn63 hướng này á bsw
Ok có thời gian BSW sẽ viết HD cho.
truất :D đem về ngay thôi
Đem về xài hay copy bài viết đem về? :v
cả 2 luôn đuê :V
:-)
hihi gửi trực tiếp lun củng dc dag cần hihih
Thấy dòng chữ cuối bài viết không? :-)
/-l /-l
hóng a hd cách sửa cộng tác viên với quản trị viên
Dạ! nó mờ quá BSW ạ :-)
Cách sửa ctv với qtv là sao em?
Cái gì mờ hả bạn?
cái này nè :D Di*me copy mà không ghi nguồn Bác Sĩ Windows là tau thẽo mày nhé!
Ờ ờ :v tưởng gì :v
:D Cho text link vs :V
:v chắc chưa ms có 2 ngày tuổi thui à =))
Thế làm thêm đi rồi quay lại sau e nhá :v
(y)
Hình như cái này có share ở blog BSW cũ đúng ko anh Trường
Ừ em, giờ chỉnh sửa tí rồi đăng lại thôi.
ahihi mail trongtrung450@gmail.com nhe cuong
Có ai gửi đâu mà đưa mail chi vậy? :v
như cmt của a ấy
:(( kì quá hà béc si win :(
Ừ em có thời gian thì anh viết hd.
Đù, phần cmt ver mới :3
Lỗi cmn phân cấp rồi mới gì :(
rep phan cap
đm sao m ko phân cấp :v aljsfhljal sdflgijerykdgh
Aa
g
fdh
rep
a Trường bắt đầu cào phím :v
phân cấp đi ascb ádfhads
phân cấp đi, đm :D
hóng cái chèn EMOTICON :v
Đang test cái form comment mới em ạ :v
Hóng gì mà hóng đây chú em :v
ủa sao cũ lại r
Đợi tí đi nó mới
/=s
ko được rồi ad
Sao bạn?
Anh trường ơi làm sao để đặt game html làm background cho blog vậy ?
Không được đâu em.
Đăng nhận xét