Tạo Popup đăng ký nhận bài viết qua Email tuyệt đẹp cho Blogspot
/ lúc / 60 bình luận
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.
Đây là thủ thuật sử dụng CSS và Javascript để thực hiện, cùng xem và thực hiện nhé!

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'>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bacsiwindowsdotcom, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tên bạn&quot;;}' onfocus='if (this.value == &quot;Tên bạn&quot;) {this.value = &quot;&quot;;}' placeholder='Tên bạn' type='text' value='Tên bạn'/>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Địa chỉ Email&quot;;}' onfocus='if (this.value == &quot;Địa chỉ Email&quot;) {this.value = &quot;&quot;;}' 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 4. 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(&quot;popup_facebook_box&quot;)!=&quot;yes&quot;){$(&quot;#subscriberbox-by-bacsiwindows&quot;).delay(0).fadeIn(&quot;10000&quot;);$(&quot;#closebox, #boxclose&quot;).#click(function(){$(&quot;#subscriberbox-by-bacsiwindows&quot;).stop().fadeOut(&quot;10000&quot;);});}});
</script>
Bước 5. Lưu mẫu.

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é!

BÌNH LUẬN VỀ BÀI VIẾT (60)

avatar
Nguyễn Trọng Trung

cmt đầu

TRẢ LỜI
avatar
Nguyễn Lương Duy

Chất

TRẢ LỜI
avatar
Trường Nguyễn

OK :)

TRẢ LỜI
avatar
Trường Nguyễn

(y)

TRẢ LỜI
avatar
Văn Thắng Entertainment

"Di*me copy mà không ghi nguồn Bác Sĩ Windows là tau thẽo mày nhé!"

TRẢ LỜI
avatar
Trường Nguyễn

:v :v

TRẢ LỜI
avatar
Nguyễn Trọng Trung

làm cái chuyển hướng đi bsw

TRẢ LỜI
avatar
Trường Nguyễn

Chuyển hướng nào bạn?

TRẢ LỜI
avatar
Trần Thanh Bình

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é!"

TRẢ LỜI
avatar
Trường Nguyễn

:v ghê chưa

TRẢ LỜI
avatar
Nguyễn Trọng Trung

tắt máy về ngủ nhanh lạc trôi di đâu đây :v

TRẢ LỜI
avatar
Trần Thanh Bình

:)

TRẢ LỜI
avatar
Nguyễn Trọng Trung

https://www.bacsiwindows.com/p/redirect.html?url=

TRẢ LỜI
avatar
Nguyễn Trọng Trung

chueyn63 hướng này á bsw

TRẢ LỜI
avatar
Trường Nguyễn

Ok có thời gian BSW sẽ viết HD cho.

TRẢ LỜI
avatar
Vương IT

truất :D đem về ngay thôi

TRẢ LỜI
avatar
Trường Nguyễn

Đem về xài hay copy bài viết đem về? :v

TRẢ LỜI
avatar
Vương IT

cả 2 luôn đuê :V

TRẢ LỜI
avatar
Nguyễn Trọng Trung

hihi gửi trực tiếp lun củng dc dag cần hihih

TRẢ LỜI
avatar
Trường Nguyễn

Thấy dòng chữ cuối bài viết không? :-)

TRẢ LỜI
avatar
Trường Nguyễn

/-l /-l

TRẢ LỜI
avatar
z0mbie win

hóng a hd cách sửa cộng tác viên với quản trị viên

TRẢ LỜI
avatar
Vương IT

Dạ! nó mờ quá BSW ạ :-)

TRẢ LỜI
avatar
Trường Nguyễn

Cách sửa ctv với qtv là sao em?

TRẢ LỜI
avatar
Trường Nguyễn

Cái gì mờ hả bạn?

TRẢ LỜI
avatar
Vương IT

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é!

TRẢ LỜI
avatar
Trường Nguyễn

Ờ ờ :v tưởng gì :v

TRẢ LỜI
avatar
Vương IT

:D Cho text link vs :V

TRẢ LỜI
avatar
Trường Nguyễn

Đủ điều kiện thì click https://www.bacsiwindows.com/2017/11/lien-ket-ban-be-cung-hop-tac-va-cung-phat-trien.html

TRẢ LỜI
avatar
Vương IT

:v chắc chưa ms có 2 ngày tuổi thui à =))

TRẢ LỜI
avatar
Trường Nguyễn

Thế làm thêm đi rồi quay lại sau e nhá :v

TRẢ LỜI
avatar
Star Sơn IT

Hình như cái này có share ở blog BSW cũ đúng ko anh Trường

TRẢ LỜI
avatar
Trường Nguyễn

Ừ em, giờ chỉnh sửa tí rồi đăng lại thôi.

TRẢ LỜI
avatar
Nguyễn Trọng Trung

ahihi mail trongtrung450@gmail.com nhe cuong

TRẢ LỜI
avatar
Trường Nguyễn

Có ai gửi đâu mà đưa mail chi vậy? :v

TRẢ LỜI
avatar
z0mbie win

như cmt của a ấy

TRẢ LỜI
avatar
Nguyễn Trọng Trung

:(( kì quá hà béc si win :(

TRẢ LỜI
avatar
Trường Nguyễn

Ừ em có thời gian thì anh viết hd.

TRẢ LỜI
avatar
Nguyễn Lương Duy

Check ib em phát anh FB.com/whoam1.info

TRẢ LỜI
avatar
Star Cường IT ­

Đù, phần cmt ver mới :3

TRẢ LỜI
avatar
Trường Nguyễn

Lỗi cmn phân cấp rồi mới gì :(

TRẢ LỜI
avatar
Trường Nguyễn

rep phan cap

TRẢ LỜI
avatar
Trường Nguyễn

đm sao m ko phân cấp :v aljsfhljal sdflgijerykdgh

TRẢ LỜI
avatar
Trường Nguyễn

Aa

TRẢ LỜI
avatar
Trường Nguyễn

g

TRẢ LỜI
avatar
Trường Nguyễn

fdh

TRẢ LỜI
avatar
Trường Nguyễn

rep

TRẢ LỜI
avatar
Nguyễn Đức Huy

a Trường bắt đầu cào phím :v

TRẢ LỜI
avatar
Trường Nguyễn

phân cấp đi ascb ádfhads

TRẢ LỜI
avatar
Phú Cường Blogger

phân cấp đi, đm :D

TRẢ LỜI

hóng cái chèn EMOTICON :v

TRẢ LỜI
avatar
Trường Nguyễn

Đang test cái form comment mới em ạ :v

TRẢ LỜI
avatar
Trường Nguyễn

Hóng gì mà hóng đây chú em :v

TRẢ LỜI
avatar
Trường Nguyễn

­

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

ủa sao cũ lại r

TRẢ LỜI
avatar
Trường Nguyễn

Đợi tí đi nó mới

TRẢ LỜI
avatar
Nguyễn Lương Duy

Check ib em cái anh ơi FB.com/whoam1.info

TRẢ LỜI
avatar
Trường Nguyễn

/=s

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

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ạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.