Widget liên hệ tốt nhất cho Blogger mẫu 08

Widget liên hệ tốt nhất cho Blogger mẫu 08

I. Bật biểu mẫu liên hệ Blogger trong Blogger. Làm theo các bước sau:

1. Đăng nhập vào tài khoản blogger của bạn.
2. Truy cập Trang tổng quan / Tổng quan Blogger.
3. Chọn phần Bố cục từ menu bên trái.
4. Nhấp vào Thêm Tiện ích (Thanh bên / Chân trang sẽ tốt hơn)> Thêm Tiện ích.
5. Nhấp vào nút Blue Plus của Tiện ích biểu mẫu liên hệ và sau đó Lưu nó.

II. Ẩn biểu mẫu liên hệ Blogger mặc định:

• Chuyển đến “ Mẫu> Chỉnh sửa Html.
• Bây giờ hãy tìm mã kết thúc kiểu: ]]> </ b: skin>.
• Dán mã CSS nhỏ này ngay trên đây.
• Lưu mẫu của bạn và bạn đã hoàn tất.

[div # ContactForm1 {display: none! important;]

III. Thêm biểu mẫu liên hệ Blogger vào trang tĩnh:

1. Bây giờ tạo trang Liên hệ tĩnh của SaibABC cho blogger
2. Chuyển đến phần Trang và nhấp vào nút Trang mới
3. Tiêu đề trang với liên hệ với chúng tôi
4. Giờ hãy chuyển đến Tùy chọn cài đặt trang
5. Chọn Bình luận của người đọc “ Không cho phép, ẩn hiện tại ”. Nhấp vào nút Xong.
6. Bây giờ hãy chọn thiết kế bạn muốn và dán vào trang đó và nhấp vào Xuất bản.
7. Vist của bạn mới tạo Liên hệ với chúng tôi Page.

IV. Copy Code Box Ở Đây Nhé!

[<div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p class='text'>Name</p> <input class='name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p class='text'>E-Mail *</p> <input class='email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p class='text'>Message *</p> <textarea class='message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <input class='btn' id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </form> </div> </div> <style> .contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold; font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;} .contact-form-widget {margin-right:auto;margin-left:auto;height: 100%;max-width: 90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);background: rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form textarea{background: #afafaf;width: 93%;height: 120px;border: 1px solid #BDBDBD;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-clip: padding-box;-moz-background-clip: padding;-webkit-background-clip: padding-box;display:block;color:#000;font-size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;} .form input {width: 60%;height: 46px;border: 1px solid #BDBDBD;border-radius: 4px;font-size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-bottom:20px;background-clip: padding-box;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form input.name {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6E4o2f1iQAPnWBxQtzt1B2MvNHqsIXgqfiH7aA7-AYETWYruaP_k3kJjJDmef1OTSDLdmeNTlXCPayzBaJ0DqJ7qN5y9JBZ2x5HGnzJvdf0uR78wm0ehLS_qhjP_6qawISh2zNi5bYGZ/s1600/pro-pic.png);background-position: 11px 8px;background-size: 28px 28px;background-repeat: no-repeat;padding-left:45px;} .form input.email {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdLSvqFZUVY75ZoCs5EieHgdIj-hc_mpwjavS0ZYfdOGis8HDpMZn75VSZIoC1GUoimOYhXB4XmBgPMdZ4eXdkAed8vH0tbMiCs7A7cklYzhvfGjTHo8iUdaiJ4lw-H6T_vDT5z0dScPkU/s1600/msg-box.png);background-repeat: no-repeat; padding-left:45px;background-position: 11px 8px;background-size: 28px 28px;} .form input.message {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6X_rQQzMoKHVUMYoSkoLLJ3DvRk0-vEjqBuQyv1Vh1uP8ffllufgvD2-yu9n0SWzI4DCq1UDpG2BStBNjhO3Q23mOld7kgFbXWjZ3_FjYsNL63v5jgpYqcSpOG6zwXP6TBNZZTqSVnt2/s1600/pencil.png);background-repeat: no-repeat;background-size: 30px 30px;background-position: 11px 8px;padding-left:45px;} .form input:focus, .form textarea:focus { -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;} .btn {background: #416b68;width: 138px !important;height: 45px;border-radius: 4px;border: 1px solid #253737;-webkit-border-radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-gradient(top, #6da5a3, #416b68);background: -webkit-linear-gradient(top, #6da5a3, #416b68);background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-shadow: #333333 0 1px 0;color: #e1e1e1;} .btn:hover {background: #416b68;border: 1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0, #416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-linear-gradient(top, #77b2b0, #416b68);} @media only screen and (max-width: 580px) { .contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-left: 3%;padding-right: 3%;} </style>
]