Trong blogspot, việc xây dựng trang liên hệ là điều rất cần thiết để blogger tạo thêm uy tín cho chính mình cũng như duy trì mối liên hệ chặt chẽ với người đọc.
Trên thực tế, trang liên hệ không nhất thiết phải có trong blogspot, nhất là blog cá nhân. Tuy nhiên, theo quan điểm của mình thì trang liên hệ đóng vai trò rất quan trọng trong việc duy trì mối liên hệ giữa người đọc với quản trị viên - đúng như nghĩa đen. Hơn nữa, việc xây dưng trang liên hệ trên blogspot cũng tương đối đơn giản chỉ qua vài thao tác, vậy tội gì không làm nhỉ ^.^
So với mã nguồn wordpress, nền tảng blogspot phải chịu thiệt thòi hơn hẳn khi không được hỗ trợ sẵn trang liên hệ. Hầu hết blogger khi tiến hành tạo mới trang liên hệ đều phải tự tay thực hiện từ A đến Z.
Để các bạn có thể nắm được trọn vẹn nội dung của bài viết, mình sẽ hướng dẫn cụ thể kèm theo giải thích luôn trong từng bước. Mặc dù dài nhưng đảm bảo 100% thành công nhé, không thành công không tính tiền ^.^
Giai đoạn 1 : Tạo mới biểu mẫu lên hệ cho blogspot (blogspot contact form)
Với giai đoạn này, chúng ta sẽ phải sử dụng đến widget - các tiện ích có sẵn được cung cấp bởi blogger. Lưu ý thêm : biểu mẫu liên hệ khác hẳn với trang liên hệ đấy nhé !
Bước 1 : Ở trang tổng quan của blogspot, tại thanh menu trái,chọn Bố cục ⇒ Thêm tiện ích để truy cập kho tiện ích.
 |
| Chọn Bố cục bên menu trái |
 |
| Chọn tiếp Thêm Tiện ích để truy cập kho tiện ích có sẵn |
Bước 2 : Theo mặc định, hệ thống sẽ đưa chúng ta truy cập vào tab đầu tiên - Tiện ích Cơ bản. Tuy nhiên, để tạo mới biểu mẫu liện hệ cho blogspot thì chúng ta phải chọn tab thứ 2 - Tiện ích khác. Sau đó, nhấn thêm một lần nữa vào dấu "+" màu xanh bên cạnh để lựa chọn tiện ích mong muốn.
Bước 4 : Tải lại blogspot để kiểm tra. Nhìn chung, giao diện của biểu mẫu liên hệ mặc định khá đơn giản.
 |
| Giao diện mặc định của biểu mẫu liên hệ |
Nếu bạn muốn thay đổi một chút để giao diện nhìn đẹp hơn, thực hiện như sau :
- Quay trở lại trang tổng quan blogspot, bên menu trái chọn Mẫu ⇒ Chỉnh sửa HTML.
- Nhấn tổ hợp phím Ctrl + F để bật tính năng tìm kiếm trực tiếp ngay trên blogspot.
- Tìm đến thẻ <b:skin><
Bước 2 : Chuyển chế độ soạn thảo từ định dạng văn bản thông thường sang định dạng HTML. Sau đó dán vào nội dung soạn thảo đoạn mã sau :
<div class="contact-form-widget">
<div class="form" style="width: 400px;">
<form name="contact-form">
Họ tên
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail người gửi *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Nội dung câu hỏi *
<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="Gửi thư" />
<br />
Chú ý : trường có dấu * là bắt buộc.
<br />
<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>
<div class="form" style="width: 400px;">
<form name="contact-form">
Họ tên
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail người gửi *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Nội dung câu hỏi *
<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="Gửi thư" />
<br />
Chú ý : trường có dấu * là bắt buộc.
<br />
<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>
 |
| Định dạng soạn thảo HTML |
Bước 3 : Nhấn Xuất bản để đăng trang liên hệ mới trên blogspot.
Bước 4 : Theo quy định, mỗi nền tảng blogger chỉ được hỗ trợ tối đa 1 biểu mẫu liên hệ. Chúng ta có thể kiểm tra ngay điều này bằng cách sao chép thêm 1 biểu mẫu liên hệ mới từ biểu mẫu đã tạo ở giai đoạn 1.
Khi nhấn vào nút Submit như hình mình họa bên dưới, chỉ có duy nhất biểu mẫu đầu tiên thông báo lỗi về email không hợp lệ, cái thứ 2 thì không. Điều này đồng nghĩa với việc sau khi tạo mới trang liên hệ ở giai đoạn 2, chúng ta buộc lòng phải xóa đi nội dung ở biểu mẫu đầu tiên ở giai đoạn 1.
 |
| Blogger chỉ hỗ trợ tối đa 1 biểu mẫu liên hệ |
Bước 5 : Quay trở lại trang chỉnh sửa HTML, trên thanh menu ngang, chọn Chuyển đến tiện ích⇒ContactForm1 rồi tiến hành thay thế toàn bộ nội dung của cặp thẻ <b:widget ...></b:widget> hiện tại bằng đoạn mã sau :
<b:widget id='ContactForm1' locked='false' title='Liên hệ' type='ContactForm'>
<b:includable id='main'>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Bước 6 : Sau bước 5, nội dung cũ trên tiện ích đã bị xóa bỏ goàn toàn, tuy nhiên tiện ích vẫn còn tồn tại trong giao diện blogspot, làm ảnh hưởng đến tốc độ tải trang. Để ẩn tiện ích này, hãy tìm đến thẻ <b:skin><
0 nhận xét:
Đăng nhận xét