Trước đây mình đã có một bài viết hướng dẫn làm thế nào để tạo
trang liên hệ cho Blogger. Ở bài viết đó mình đã hướng dẫn với các bạn cách tạo và chia sẻ với các bạn một giao diện đơn giản cho trang liên hệ đó. Hôm nay mình lập này xin được chia sẻ với các bạn một giao diện mới theo ý kiến cá nhân của mình thì đẹp hơn so với giao diện trước đó, mời các bạn xem thử.
Trước khi thực hiện thêm giao diện này vào blog của bạn, nếu bạn có sử dụng đoạn css giao diện mà mình chia sẻ tải bài viết trước thi hãy xóa nó đi. Còn đối với những bạn chưa làm gì hết, thì hãy thêm vào blog của mình widget biểu mẫu liên hệ theo hướng dẫn ở bài viết trước luôn.
Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot
Công việc đầu tiên bạn đối với những bạn chưa có trang liên hệ thì hãy tạo một trang trống rồi sao chép và dán đoạn mã sau đây vào trang đó, còn đối với những bạn có tạo trang liên hệ trước đó rồi thì hãy thay thế đoạn mã trước tại trang đó bạn đoạn mã này.
<form name="contact-form">
<p></p>
Họ và tên
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Địa chỉ Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Lời nhắn <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Gửi" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
Lưu ý đối với đoạn mã trên, mình không hề thêm một thẻ <br> ngắt dòng nào vì mình sử dụng Tùy chọn Nhấn "Enter" để ngắt dòng. Do đó nếu bạn nào sử dụng thẻ <br> thì tự thêm vào dùm mình nhé.
Bước tiếp theo cũng tương tự như bài viết thêm đoạn css căn chỉnh giao diện vào trước thẻ ]]></b:skin> trên phần chỉnh sửa template của bạn.
/* CSS Căn Chỉnh Biểu Mẫu Liên Hệ */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}
Sau khi hoàn tất thì lưu lại toàn bộ giao diện cũng như trang mà mình đã hướng dẫn các bạn tạo ở trên là hoàn tất.
Lời kết
Về giao diện mới thành thì nó cũng tương đối là đơn giản, nhưng rõ rằng mà đẹp hơn khá nhiều, vì phông chữ đã được căn chỉnh cho to hơn và các phần để nhập văn bản cũng có kích thước hợp lý hơn và hiệu ứng đẹp hơn. Chúc các bạn ngon mắt hơn với giao diện này!
P/S: Cập nhật thêm video hướng dẫn
http://youtu.be/oi10qyoLncE
Belum ada tanggapan untuk "Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot"
Post a Comment