0 bình luận · lượt xem

Tạo trang liên hệ từ widget của blogspot



Tạo trang liên hệ từ widget của blogspot
Tạo trang liên hệ từ widget của blogspot
Hôm nay mình hướng dẫn bạn tạo trang liên hệ mặc định của blogspot từ đó các bạn có thể tùy biến css theo ý thích của bạn.

Nếu thấy quá ok thì chúng ta tiến hành thủ thuật "Tạo trang liên hệ từ widget của blogspot"
Bước 1: Đăng nhập vào Blogger » Bố cục » Thêm tiện ích
Tại của số của thêm tiện ích, các bạn ngó qua khu vực menu phía bên trái, chọn vào tab Tiện ích Khác. Sau khi chọn vào tab đó bạn sẽ thấy tiện ích Biểu mẫu liên hệ, chọn và thêm nó vào blog của bạn.
Tạo trang liên hệ từ widget của blogspot
Tạo trang liên hệ từ widget của blogspot
Bước 2: Các bạn vào lại trang tổng quan của blog của bạn » Mẫu » Chỉnh sửa HTML
Tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên.

.ContactForm {  display: none;}
Nhiệm vụ của code trên là ẩn widget mặc định của blogspot đi.

Bước 3: Ở trang tổng quan bạn vào Trang » Trang mới. Bạn chuyển sang soạn thảo bằng HTML và dán code bên dưới vào
<div class="contact-form-widget"><div class="form"><form name="contact-form">Họ Tên của bạn<input class="placer" id="ContactForm1_contact-form-name" name="name" placeholder="Nhập Tên của bạn (không bắt buộc)" size="30" type="text" value="" />E-mail *<input class="placer" id="ContactForm1_contact-form-email" name="email" placeholder="Nhập Email của bạn (bắt buộc)" size="30" type="text" value="" />Lời nhắn *<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><input class="button1" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></form></div></div>

Bước cuối cùng: là đoạn code css bạn vào Mẫu » Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> và thêm đoạn code bên dưới vào và Save lại

.contact-form-widget {font:148% segoe ui light;max-width: 100%;padding: 3% 10% 8% 21%;background:#3f65b7;color: #fff;border: 1px solid #C1C1C1;line-height:240%;}.contact-form-name, .contact-form-email, .contact-form-email-message {max-width: 88%;}.contact-form-button-submit {border-color: #C1C1C1;background: #E3E3E3;color: #585858;width: 20%;max-width: 20%;margin-bottom: 10px;}.contact-form-button-submit:hover{background: #4C8EF9;color: #ffffff;border: 1px solid #FAFAFA;}

CHÚC CÁC BẠN THÀNH CÔNG!

P/s Nếu không hiểu phần nào vui lòng comment bên dưới!



Có thể bạn thích

Không có nhận xét nào:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!