Tạo trang liên hệ trong Blogspot qua 4 bước

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>Tên</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>Email của bạn *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Nhập nội dung *</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='Gửi'/>
        <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é.

Sưu tầm internet