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

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

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 dir="ltr" style="text-align: left;" trbidi="on">
Here Goes Your Contact Page Message To Visitors or Else Delete it.
<br />
<style>
.twist_blogger_cntct_form_wrap {
margin: 0 auto;
max-width: 840px;
padding: 0 10px;
position: relative;
background-color: #FDFDFD;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
content: '';
display: table;
clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#twist_blogger_cntct_form {
padding: 20px 20px 10px 20px;
background: #FA540B;
border-radius: 2px;
margin: 20px auto 20px;
color: #FFF;
font-size: 16px;
max-width: 260px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
padding: 5px;
box-shadow: none!Important;
min-width: 186px;
max-width: 260px;
width: 100%;
border: 0 !important;
line-height: 1em;
min-height: 31px;
background: #FCFCFC;
margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
background: #FA540B;
font-size: 20px;
letter-spacing: 2px;
cursor: pointer;
outline: none!important;
color: #FFFFFF;
border: 2px solid rgba(255,255,255,1);
border-radius: 50px;
min-width: 186px;
max-width: 260px;
width: 100%;
text-transform: uppercase;
height: 46px;
margin-top: 10px!important;
transition: all 300ms ease-;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
border: 2px solid;
color: #FFFFFF;
background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
border-color: #FFFFFF;
box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
background: #f9edbe;
border: 1px solid #f0c36d;
bottom: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
color: #666;
font-size: 12px;
font-weight: bold;
padding-bottom: 10px;
line-height: 19px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
}
</style>
<br />
<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Your Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
<br />
Your Email*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
<br />
Your Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 260px; text-align: center; width: 100%;">
<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>
</div>
</form>
<br />
</div>
</div>
</div>]