Tạo khung đăng ký qua Email tuyệt đẹp bằng CSS cho Blogspot (Style 2)

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

Tạo khung đăng ký qua Email tuyệt đẹp bằng CSS cho Blogspot (Style 2)

Share:
Chào các bạn, hôm nay rảnh rỗi ngồi nghịch một tí CSS cho form đăng ký bài viết qua Email trên Blogspot.
Đây là mẫu form đăng ký thứ 2, ngoài ra bạn có thể xem thêm 2 mẫu đăng ký do mình thiết kế trước đó tại đây:
Để thấy rõ hơn thì bạn có thể xem demo trực tiếp tại đây hoặc qua ảnh bên dưới nhé.
Xem Demo

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

Bước 1. Chèn CSS này vào trước thẻ ]]></b:skin>
#subscribe-form-bacsiwindows h2{margin:0;padding:0;font:500 32px Roboto;color:#ffd969}
#subscribe-form-bacsiwindows h3{color:#fff;font:300 20px Roboto;line-height:1.75;margin:15px 0;letter-spacing:-.5px}
#subscribe-form-bacsiwindows{background:linear-gradient(125deg,#7577a9 0,#35353c 100%);text-align:center;display:block;padding:55px 20px;box-sizing:border-box;position:relative;width:100%}
.form-sub-bacsiwindows{text-align:center;margin-top:20px;color:#fff}
.input_sub-bacsiwindows{background:rgba(0,0,0,0.1);border:0;padding:15px 15px 15px 60px;font:400 16px Roboto;color:#fff;width:20%;;outline:0}
input.input_sub-bacsiwindows::-webkit-input-placeholder{color:#fff}
input.input_sub-bacsiwindows::-moz-placeholder{color:#fff}
input.input_sub-bacsiwindows:-ms-input-placeholder{color:#fff}
.input-sub-bacsiwindows{display:inline;margin:12px 13px}
.input-sub-bacsiwindows i{background:rgba(0,0,0,0.2);color:#fff;margin:0;padding:16px;position:absolute}
.form-sub-bacsiwindows .buter{background:#7577a9;border-radius:0;color:#fff;display:block;margin:25px auto 0;padding:12px 0;transition:.35s;width:250px;cursor:pointer;outline:0;border:double #4e4f67;font:400 16px Roboto;letter-spacing:.0535354125em}
.form-sub-bacsiwindows .buter:hover{opacity:.69}
Bước 2. Chèn đoạn code này vào nơi bạn muốn hiển thị, nên để nó ở cuối trang giống Bác Sĩ Windows.
<div id='subscribe-form-bacsiwindows'>
<h2>ĐĂNG KÝ BÁC SĨ WINDOWS</h2>
<h3>Khi có bài viết mới, chúng tôi sẽ thông báo cho bạn qua Email<br/>Cam kết không SPAM hay lừa đảo!</h3>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=bacsiwindowsdotcom' class='form-sub-bacsiwindows' method='post' target='_new'>
<div class='input-sub-bacsiwindows'>
<i class='fa fa-user'/>
<input class='input_sub-bacsiwindows' name='name' placeholder='Tên của bạn' type='text'/>
</div>
<div class='input-sub-bacsiwindows tilt'>
<i class='fa fa-envelope'/>
<input class='input_sub-bacsiwindows' name='email' placeholder='Địa chỉ Email' type='text'/>
</div>
<input class='buter' type='submit' value='ĐĂNG KÝ NGAY'/></form>
<div class='clear'/>
</div>
Bước 3. Lưu mẫu.

Tổng kết

Đây là mẫu khung đăng ký mình thiết kế thấy khá đẹp mắt, nếu bạn không thích mẫu này thì có thể xem thêm 3 mẫu khác mình có đưa link ở đầu bài viết nhé! Chúc bạn thành công.
CHUYÊN MỤC

Bài Viết Liên Quan

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

3 Nhận xét

muốn đổi màu thành ảnh làm sao ad

Bạn thay background:linear-gradient(125deg,#7577a9 0,#35353c 100%)
Bằng background:url(https://static.edumall.vn/assets/edumall_v3/bg-header-2b2547de83ec3b62c43b8e5f101c957d0ba19cfde26946b4442917cfdf3aa2e8.jpg)
là được nhé

kimsinhit.net ad ạ tks ad để tí e đổi

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