Hướng dẫn tạo trang Liên hệ với chúng tôi trong Blogger

Bạn cũng biết Blogger rất mạnh mẽ và dễ vận hành nền tảng CMS, bạn không cần phải là người đam mê tạo bảng điều khiển hoặc cài đặt. Nhưng với sự dễ dàng đó nó cũng có một số hạn chế, Theo mặc định, bạn không thể tạo trang Liên hệ với chúng tôi, bạn buộc phải sử dụng plugin của bên thứ ba nào hoặc phải điều chỉnh tiện ích liên hệ chính thức của blogger, để nó có thể hoạt động trên các trang tĩnh . 
Việc tạo một trang riêng cho mục đích liên hệ chuyên nghiệp và cũng làm cho blog của bạn sạch sẽ bằng cách ẩn các tiện ích và plugin không cần thiết .Vì vậy, hãy  xem Cách tạo trang Liên hệ với tôi trong Blogger . Trước khi làm những điều này bạn nên tạo cho mình một bản sao lưu cho an toàn.
Bước đầu tiên (Quan trọng)
Trước khi làm theo hướng dẫn sau đây, tôi khuyên bạn nên cài đặt tiện ích biểu mẫu liên hệ trong blog của mình, quá trình này rất dễ dàng và có thể được thực hiện trong vài phút, chỉ với một cú nhấp chuột đơn giản Thêm Tiện Ích →Biểu mẫu liên hệ.
Ẩn tiện ích ( Thêm CSS ) 
Việc đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập → Mẫu → Chỉnh sửa HTML và tìm kiếm thẻ kết thúc ]]> </ b: skin> và ngay phía trên nó dán mã dưới đây.
//////////////////////////////////////////////////////
.sidebar .widget.ContactForm {
    display: none!important;
}
//////////////////////////////////////////////////////
Tạo một trang ( Thêm HTML  ) 
Tìm kiếm thẻ kết thúc ]]> </ b: skin> và ngay phía trên nó dán mã sau đây.
//////////////////////////////////////////////////////
<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
                                <br />
<div style="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>
</div>
</div>
</div>
</div>
</div>
//////////////////////////////////////////////////////
Ok ! Vậy là đã xong phần tạo trang liên hệ với chúng tôi trong Blog rồi! Chúc các bạn thành công và đừng quên thường xuyên ghé trang để xem những bài viết mới nhé!
Bình Luận()