Hướng dẫn tạo trang liên hệ cho Blogger

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

Đă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.

Nội dung chính