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

by 9:26:00 AM 5 nhận xét
Mặc định Blogger không có trang liên hệ mà chỉ có gadget form liên hệ, nhưng chỉ cần vài bước đơn giản bạn cũng có thể làm một trang liên hệ riêng cho blog của mình.


Các bạn làm theo các bước sau:

1. Tạo form liên hệ bằng gadget:
Bạn đăng nhập admin => Bố cục => Chọn 1 vị trí bất kì để đặt gadget, chọn Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ như trong hình



Điền thông tin cơ bản rồi nhấn Lưu lại

2. Ẩn Form liên hệ tại vị trí vừa Add:
Bạn vào Template => Edit HTML => Search và xóa đoạn code được bôi đỏ bên dưới:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

    <b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
       
 <input class='contact-form-name' expr:id='data:widget.instanceId + 
&quot;_contact-form-name&quot;' name='name' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <input class='contact-form-email' expr:id='data:widget.instanceId + 
&quot;_contact-form-email&quot;' name='email' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <textarea class='contact-form-email-message' cols='25' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-email-message&quot;' name='email-message' 
rows='5'/>
        <p/>
        <input 
class='contact-form-button contact-form-button-submit' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-submit&quot;' 
expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
         
 <p class='contact-form-error-message' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-error-message&quot;'/>
          <p
 class='contact-form-success-message' expr:id='data:widget.instanceId + 
&quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>

</b:includable>

  </b:widget> 
Sau đó bạn nhấn Lưu

3. Tạo trang liên hệ:
Bạn vào Pages => Tạo trang mới => mở khung soạn thảo ở chế độ HTML sau đó dán đoạn code bên dưới vào rồi nhấn Lưu

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <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'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>
Lưu ý: Trước khi nhấn lưu bạn nhớ đặt tên cho trang ví dụ như "Liên hệ" và cài đặt tùy chọn không cho phép Comment.

4. Style cho trang liên hệ:
Bạn vào Template => Edit HTML => Search "</b:skin>" và dán đoạn code này bên trong.

.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
Sau đó nhấn Lưu và xem kết quả :


Lưu ý: Link trang liên hệ là link trang bạn vừa tạo nhé.

Chúc các bạn thành công!

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger 

5 comments:

  1. cho mình hỏi khi người ta ấn thông tin vào thì mình xem những thông tin đó ở đâu bạn nhỉ

    ReplyDelete
    Replies
    1. Chào bạn Minh Quân, khi người liên hệ nhập nội dung liên hệ đầy đủ và nhấn nút Submit, nội dung liên hệ sẽ được gửi đến email mà bạn dùng để đăng nhập Blogger.


      Thanks.

      Delete
  2. mình tạo xong vô trang chủ ko thấy biểu mẫu liên hệ vậy khi khách viếng thăm có thể kích vào đâu để hiện ra biểu mẫu

    ReplyDelete
    Replies
    1. Hi bạn! trong bài viết mình có lưu ý: "Link trang liên hệ là link trang bạn vừa tạo nhé". Vậy nên sau khi tạo trang liên hệ xong bạn tạo một menu ở đâu đó trên site bạn, gắn link page bạn vừa tạo là được. Để lấy link trang bạn vừa tạo, bạn đăng nhập quản trị => Page/Trang => View/Xem

      Delete
  3. Mình đã làm được! Cảm ơn Ad, bài viết rất hay và ý nghĩa. Nếu bạn nào có nhu cầu làm mô hình kiến trúc hãy liên hệ với mình nha. Click link "mô hình kiến trúc" ủng hộ mình. Cảm ơn cả nhà!

    ReplyDelete