Tạo khung đăng ký bài viết qua Email tuyệt đẹp cho Blogspot
Chào các bạn, theo yêu cầu của bạn Trọng Khanh gửi 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);}
<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>