Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot - KslZone.NET

  • June 26, 2014

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

[![Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot](http://2.bp.blogspot.com/-PiRkkMBnFbU/U6vBqp6HuuI/AAAAAAAACU0/099Fq19IcoE/s1600/giao-dien-trang-lien-he-blogger-blogspot-kslzone.PNG "Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot")](http://2.bp.blogspot.com/-PiRkkMBnFbU/U6vBqp6HuuI/AAAAAAAACU0/099Fq19IcoE/s1600/giao-dien-trang-lien-he-blogger-blogspot-kslzone.PNG)

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.

Họ và tên

Địa chỉ Email *

Lời nhắn *

Lưu ý đối với đoạn mã trên, mình không hề thêm một thẻ
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ẻ
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