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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
Chào các bạn, theo yêu cầu của bạn Trọng Khanh gửi đến Bác Sĩ Windows yêu cầu mình chia sẻ khung đăng ký nhận bài viết qua Email mình vừa cài vào Blog.
Đây là tiện ích giúp người khác có thể đăng ký theo dõi Blog của bạn bằng địa chỉ Email. Khi bạn xuất bản bài viết mới thì nó sẽ tự động gửi mail về cho người đã đăng ký.
Xem thêm: Tạo hộp đăng ký giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot.
Xem Demo

Các bước thực hiện

Bước 1. Chèn CSS sau vào trước thẻ ]]></b:skin> trong template.
/* Subscribe box by bacsiwindows.com */
#subscribe_box-bsw{background:#d66055;margin:0 0 10px;padding:0 0 10px;}
#subscribe_box-bsw h2{padding:10px;margin:0;font:400 20px Roboto;text-align:center;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.12);}
#subscribe_box-bsw p{margin:0;padding:15px;text-align:center;letter-spacing:-.35px;color:#f4f4f4;}
.u-subscribe-box-bsw{font:400 16px Roboto;transition:.35s;outline:0;background:#fff url(https://2.bp.blogspot.com/-WCZ--t5TFbk/WQyAIDz4BjI/AAAAAAAAASg/NyYU5QRk4QIUaa93HvIkWrD9CzIozATiwCLcB/s16/username-icon------bacsiwindows-com.png) no-repeat 7px 48%;color:#444;padding:10px 15px 10px 30px;display:block;border:0;width:80%;box-sizing:border-box;margin:0 auto 10px;}
.u-subscribe-box-bsw:focus,.e-subscribe-box-bsw:focus{;}
.e-subscribe-box-bsw{font:400 16px Roboto;transition:.35s;outline:0;background:#fff url(https://4.bp.blogspot.com/-DAZhj75tYCs/WQyAIMeTjgI/AAAAAAAAASk/desjuq5r1xkNeRIk9PBcDsLYRLyGkzV6ACLcB/s16/email-icon------------bacsiwindows-com.png) no-repeat 7px 48%;color:#444;padding:10px 15px 10px 30px;display:block;border:0;width:80%;box-sizing:border-box;margin:auto;}
.s-subscribe-box-bsw{cursor:pointer;border:0;outline:0;display:block;color:#fff;text-decoration:none;background:rgba(6,6,6,0.15);width:40%;margin:20px auto 10px;padding:10px 15px;font:400 16px Roboto;letter-spacing:0;transition:.35s;border-radius:5px;}
.s-subscribe-box-bsw:hover{background:rgba(6,6,6,0.25);}
Bước 2. Chèn đoạn code sau vào nơi bạn muốn hiển thị, ví dụ phía sau đoạn <div class='sidebar-wrapper... chẳng hạn, hoặc tìm đoạn tương tự.
<div id='subscribe_box-bsw'>
  <div class='i-subText'>
    <h2>Đăng ký nhận bài viết</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ừ BSW hoàn toàn miễn phí! Cam kết không SPAM!</p>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=bacsiwindowsdotcom' class='i-boxForm' method='post' target='_new'>
      <input class='u-subscribe-box-bsw' name='name' placeholder='Tên của bạn' type='text'/>
      <input class='e-subscribe-box-bsw' name='email' placeholder='Địa chỉ Email' type='text'/>
      <input class='s-subscribe-box-bsw' type='submit' value='ĐĂNG KÝ'/>
    </form>
  </div>
</div>
Bước 3. Lưu template/tiện ích.

Tổng kết

Đây là một widget nhỏ giúp độc giả có thể theo dõi Blog của bạn, mình thấy cũng khá hay và hữu ích. Nếu thấy hay thì hãy áp dụng và chia sẻ bài viết cho bạn bè nhé!
Tiện thể đăng ký theo dõi Blog Bác Sĩ Windows luôn để không bỏ lỡ bài viết mới từ Bác Sĩ Windows nhé! Cảm ơn các bạn!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

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.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.