Một blog hoặc một website bình thường lúc nào cũng sẽ có ba trang đó là About (Giới thiệu), Privacy Policy (Chính sách bảo mật), và Contact (Liên hệ). Một website mà có 3 trang này thì thông thường sẽ được tin tưởng và sử dụng bởi nhiều người dùng hơn. Đối với Blogger thì hai loại trang About, và Privacy Policy thì hoàn toàn có thể tạo ra đơn giản chỉ như việc viết bài mới và căn chỉnh bố trí bài đó. Thế làm sao chúng ta tạo ra được trang liên hệ cho Blogger? Để giải đáp thắc mắc này, mình viết ra bài viết này để hướng dẫn mọi người về cách tạo ra một trang liên hệ riêng cho mình.
Hướng dẫn tạo trang liên hệ cho Blogger
Thủ thuật mà mình hướng dẫn ở đây là chính lợi dụng widget có sẵn của Blogger cướp về trang tĩnh để xài. Nói thế bạn cũng hiểu, đầu tiên để lợi dụng thì chúng ta phải tạo ra nó.
Video hướng dẫn:
http://youtu.be/oi10qyoLncE
Đă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.
Bước tiếp theo, chúng ta sẽ làm ẩn đi tiên ích Biểu mẫu liên hệ đó, và lợi dụng những chức năng có sẵn của nó để viết ra một khung liên hệ khác tại trang mới mà chúng ta tạo tại Blogger.
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;
}
Bước kế tiếp, chúng ta sẽ tạo một trang liên hệ bằng trang tĩnh tại blog của chúng ta. Tại trang tổng quan bạn chọn vào
Trang » Trang mới. Tại phần nội dung của trang mới, bạn chuyển sang soạn thảo bằng HTML và thêm đoạn mã này vào
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Họ Tên của bạn
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" 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="contact-form-button contact-form-button-submit" 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>
qua bước này bạn đã có cho mình trang liên hệ riêng của mình, nhưng tương đối là không đẹp, vì chưa có trang trí gì cho nó cả. Bạn hoàn toàn có thể trang trí lại nó bằng CSS cho nó. v.d. bạn có thể sử dụng đoạn css giống như của mình ở đây.
Các bạn vào lại
Mẫu » Chỉnh sửa HTML tìm đến thẻ
]]></b:skin> và thêm đoạn css sau lên trên
/* Contact Form Container */
.contact-form-widget {
width: 600px;
max-width: 90%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
Cuối cùng
lưu lại template của bạn và xem thử kết quả.
Lời kết
Tất cả mọi website bao gồm cả blog đều nên có một trang Liên hệ, việc thêm trang liên hệ vào blog của chúng ta giúp chúng ta giao tiếp được đến người dùng nhiều hơn, và tăng thêm được độ uy tín tại blog của chúng ta.
P/S: Các bạn có thể tham khảo qua giao diện khác cho trang liên hệ tại đây "Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot" hoặc muốn tạo form liên hệ chuyên nghiệp hơn thì hãy xài dịch vụ của bên như ba như "2 dịch vụ form liên hệ miễn phí nhiều tính năng".
Belum ada tanggapan untuk "Hướng dẫn tạo trang liên hệ cho Blogger"
Post a Comment