Hướng dẫn tùy chỉnh liên hệ từ widget trong Blog

Ở bài viết trước tôi đã chia sẻ một hướng dẫn về Cách Thêm tiện ích biểu mẫu liên hệ trong Blogger .

 Bây giờ trong bài viết này, chúng ta sẽ hiểu cách tùy chỉnh liên hệ từ widget trong Blogger .
 Về cơ bản đây là phần thứ hai của bài viết đó vì hầu hết các blogger đang sử dụng nền tảng blogspot không sử dụng tiện ích biểu mẫu liên hệ chính thức do vẻ ngoài của nó, Nó trông không chuyên nghiệp và hấp dẫn, cũng không phù hợp với thiết kế mẫu blogger tùy chỉnh. Vì vậy, hãy xem cách tùy chỉnh liên hệ từ widget trong Blogger ở bài viết này.
Trước khi làm theo hướng dẫn dưới đây, bạn nên cài đặt tiện ích biểu mẫu liên hệ trong blog của mình, quá trình này rất dễ dàng và có thể được thực hiện trong vài phút, chỉ với một cú nhấp chuột đơn giản. Chúng tôi đã xuất bản một hướng dẫn trước đó, vì vậy bạn sẽ không gặp phải bất kỳ khó khăn nào. Vui lòng làm theo  Cách thêm tiện ích biểu mẫu liên hệ trong Blogger và Blogspot Blog .
Quá trình tùy chỉnh ( Thêm CSS )
Bước đầu tiên
Đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập → Mẫu → Chỉnh sửa HTML và tìm kiếm thẻ kết thúc ]]> </ b: skin> và ngay phía trên nó dán mã sau đây.
///////////////////////////////////////////////////////////////////////////////////
/* ######## Contact Form Widget By Sorabloggingtips.com ######################### */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {
max-width: none;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
background-color: #EBEBEB;
border: 1px solid #ccc;
}
.contact-form-widget .form {
}
.contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border:0;
background-image: none;
background-color: #00c8d7 !important;
cursor: pointer;
font-style: normal;
font-weight: 400;
}
.contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {
border: 0;
box-shadow: none;
}
.contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {
border: 0;
}
.contact-form-button-submit:hover {
background-color: #303030;
background-image: none;
border: 0;
}
///////////////////////////////////////////////////////////////////////////////////
Vậy là đã xong !Chúc các bạn thành công và đừng quên thường xuyên ghé trang để xem những bài viết mới nhé!
Bình Luận()