Tạo Popup đăng ký nhận bài viết qua Email tuyệt đẹp cho Blogspot
/ lúc / 65 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é!

65 nhận xét:

Nguyễn Trọng Trung nói...

cmt đầu

Nguyễn Lương Duy nói...

Chất

Trường Nguyễn nói...

OK :)

Trường Nguyễn nói...

(y)

Văn Thắng Entertainment nói...

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

Trường Nguyễn nói...

:v :v

Nguyễn Trọng Trung nói...

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

Trường Nguyễn nói...

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

Trần Thanh Bình nói...

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ường Nguyễn nói...

:v ghê chưa

Nguyễn Trọng Trung nói...

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

Trần Thanh Bình nói...

:)

Nguyễn Trọng Trung nói...

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

Nguyễn Trọng Trung nói...

chueyn63 hướng này á bsw

Trường Nguyễn nói...

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

Vương IT nói...

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

Trường Nguyễn nói...

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

Vương IT nói...

cả 2 luôn đuê :V

Vương IT nói...

:-)

Nguyễn Trọng Trung nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

/-l /-l

z0mbie win nói...

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

Vương IT nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Vương IT nói...

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ường Nguyễn nói...

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

Vương IT nói...

:D Cho text link vs :V

Trường Nguyễn nói...

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

Vương IT nói...

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

Trường Nguyễn nói...

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

Vương IT nói...

(y)

Star Sơn IT nói...

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

Trường Nguyễn nói...

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

Nguyễn Trọng Trung nói...

ahihi mail trongtrung450@gmail.com nhe cuong

Trường Nguyễn nói...

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

z0mbie win nói...

như cmt của a ấy

Nguyễn Trọng Trung nói...

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

Trường Nguyễn nói...

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

Nguyễn Lương Duy nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

rep phan cap

Trường Nguyễn nói...

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

Trường Nguyễn nói...

Aa

Trường Nguyễn nói...

g

Trường Nguyễn nói...

fdh

Trường Nguyễn nói...

rep

Nguyễn Đức Huy nói...

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

Trường Nguyễn nói...

phân cấp đi ascb ádfhads

Phú Cường Blogger nói...

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

An Vũ nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

­

Trọng Khanh Nguyễn nói...

ủa sao cũ lại r

Trường Nguyễn nói...

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

Nguyễn Lương Duy nói...

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

Trường Nguyễn nói...

/=s

Hậu Vũ nói...

ko được rồi ad

Trường Nguyễn nói...

Sao bạn?

TRE TRAU nói...

Anh trường ơi làm sao để đặt game html làm background cho blog vậy ?

TRE TRAU nói...

Dạng giống như này : https://games.cdn.famobi.com/html5games/s/smarty-bubbles/v110/?fg_domain=play.famobi.com&fg_aid=A1000-1&fg_uid=d8f24956-dc91-4902-9096-a46cb1353b6f&fg_pid=4638e320-4444-4514-81c4-d80a8c662371&fg_beat=520#_ga=2.143164469.1683352157.1525085581-1738871278.1525085581

Trường Nguyễn nói...

Không được đâu em.

Đăng nhận xét