Cách tạo trang liên hệ trong Blogger

Blogger rất mạnh mẽ và miễn phí, bạn có thể dễ dàng tạo một blog hoặc một trang tin cho mình. Nhưng với sự dễ dàng đó, nó cũng có một số ...



Blogger rất mạnh mẽ và miễn phí, bạn có thể dễ dàng tạo một blog hoặc một trang tin cho mình. 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 phải sử dụng bất kỳ 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 (html). Tạo một trang riêng cho mục đích liên hệ chuyên nghiệp hơn 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 chúng tôi trong Blogger .



Bước đầu tiên (Quan trọng)

Trước khi làm theo hướng dẫn dưới đây, chúng 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 nếu chưa có, đây là một quá trình rất dễ và có thể được thực hiện trong vài phút, chỉ với một vài cú nhấp chuột đơn giản. Chúng tôi đã xuất bản một hướng dẫn trước đó, vì vậy bạn sẽ không gặp phải bất kỳ khó khăn nào. Vui lòng làm theo Cách thêm tiện ích biểu mẫu liên hệ trong Blogger và Blogspot Blog .

Ẩn tiện ích ( Thêm CSS )

Trước khi chỉnh sửa, chúng tôi khuyên bạn nên tạo bản sao lưu mẫu của mình.
Điều đầ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à dán phía trên nó mẫu sau đây:

.sidebar .widget.ContactForm {
display: none!important;
}


Tạo một trang liên hệ (HTML)

Dán mã sau vào trang html và lưu lại

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

Lưu lại và xem thành quả nào. Nếu có thắc mắc thì comment bên dưới nhé.

COMMENTS

Tên

add-on,4,Blogger,10,Blogger Template,7,Blogger Tricks,4,Cs-cart,5,WooCommerce,2,Wordpress,23,Wordpress Plugin,15,Wordpress theme,11,
ltr
item
DATVNN.COM: Cách tạo trang liên hệ trong Blogger
Cách tạo trang liên hệ trong Blogger
https://1.bp.blogspot.com/-2YWKjhCbMSA/XYpWJ6cjOZI/AAAAAAAAAVs/ilMWWtGVdv0tHT89MbRHgEXdC-bsbsoiwCLcBGAsYHQ/s400/huong-dan-tao-trang-lien-he-cho-blogger.jpg
https://1.bp.blogspot.com/-2YWKjhCbMSA/XYpWJ6cjOZI/AAAAAAAAAVs/ilMWWtGVdv0tHT89MbRHgEXdC-bsbsoiwCLcBGAsYHQ/s72-c/huong-dan-tao-trang-lien-he-cho-blogger.jpg
DATVNN.COM
https://www.datvnn.com/2019/09/cach-tao-trang-lien-he-trong-blogger.html
https://www.datvnn.com/
https://www.datvnn.com/
https://www.datvnn.com/2019/09/cach-tao-trang-lien-he-trong-blogger.html
true
2621903661232250745
UTF-8
Đã Tải Tất Cả Bài Viết Không tìm thấy bài viết nào Xem Tất Cả Đọc thêm Trả lời Hủy trả lời Delete Bởi Home TRANG BÀI VIẾT Xem Tất Cả ĐỀ NGHỊ CHO BẠN LABEL LƯU TRỮ TÌM KIẾM TẤT CẢ BÀI VIẾT Không tìm thấy bài viết phù hợp Trở lại Trang Chủ Chủ Nhật Thứ 2 Thứ 3 Thứ 4 Thứ 5 Thứ 6 Thứ 7 CN 2 3 4 5 6 7 Tháng 1 Tháng 2 Tháng 3 Tháng 4 Tháng 5 Tháng 6 Tháng 7 Tháng 8 Tháng 9 Tháng 10 Tháng 11 Tháng 12 Th1 Th2 Th3 Th4 Th5 Th6 Th7 Th8 Th9 Th10 Th11 Th12 vừa nãy 1 phút trước $$1$$ phút trước 1 giờ trước $$1$$ giờ trước Hôm qua $$1$$ ngày trước $$1$$ tuần trước hơn 5 tuần trước Người theo dõi Theo dõi NỘI DUNG PREMIUM NÀY ĐƯỢC KHÓA BƯỚC 1: Chia sẻ lên mạng xã hội BƯỚC 2: Nhấp vào liên kết trên mạng xã hội của bạn Copy Tất Cả Mã Chọn Tất Cả Mã Tất cả các mã đã được sao chép vào clipboard của bạn Không thể sao chép mã / văn bản, vui lòng nhấn [CTRL]+[C] (hoặc CMD+C với Mac) để sao chép Bảng của Nội dung