Tạo Popup đăng ký nhận bài viết qua Email tuyệt đẹp cho Blogspot

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.
  1. "Di*me copy mà không ghi nguồn Bác Sĩ Windows là tau thẽo mày nhé!"

    Trả lờiXóa
  2. 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ờiXóa
  3. truất :D đem về ngay thôi

    Trả lờiXóa
    Trả lời
    1. Đem về xài hay copy bài viết đem về? :v

      Xóa
    2. cả 2 luôn đuê :V

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

      Xóa
    4. Dạ! nó mờ quá BSW ạ :-)

      Xóa
    5. 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é!

      Xóa
    6. Ờ ờ :v tưởng gì :v

      Xóa
    7. :D Cho text link vs :V

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

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

      Xóa
    10. Thế làm thêm đi rồi quay lại sau e nhá :v

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

    Trả lờiXóa
  5. Hình như cái này có share ở blog BSW cũ đúng ko anh Trường

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

      Xóa
  6. Check ib em phát anh FB.com/whoam1.info

    Trả lờiXóa
  7. Lỗi cmn phân cấp rồi mới gì :(

    Trả lờiXóa
  8. đm sao m ko phân cấp :v aljsfhljal sdflgijerykdgh

    Trả lờiXóa
  9. a Trường bắt đầu cào phím :v

    Trả lờiXóa
  10. hóng cái chèn EMOTICON :v

    Trả lờiXóa
  11. Check ib em cái anh ơi FB.com/whoam1.info

    Trả lờiXóa
  12. Anh trường ơi làm sao để đặt game html làm background cho blog vậy ?

    Trả lờiXóa
    Trả lời
    1. 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

      Xóa
  13. HD làm bài viết đầu trang theo nhãn đi bác

    Trả lờiXóa
    Trả lời
    1. Ý bạn là sao mình không hiểu?

      Xóa
    2. Cái bố cục bài viết theo nhãn Theme đầu trang của bác đó -_-

      Xóa
    3. Đó là recent post by label, google tìm nhiều lắm.

      Xóa
    4. Cảm ơn bác nhiều nhé :p

      Xóa
    5. à khung search bác bị lỗi kìa

      Xóa
    6. Click vào nó tự đóng đúng không?

      Xóa
    7. Bác ra bài hd làm cái bình luận trên thank menu đi bác chớ Bác việt hd làm hông được :((

      Xóa
    8. Anh Tuấn hướng dẫn bạn làm không được thì chắc gì mình HD bạn làm được :D

      Xóa
CÓ THỂ BẠN ĐANG TÌM