Tạo Một Biểu Mẫu Liên Hệ Nổi Bật Cho Blogspot V1
20:42Demo |
Đầu Tiên
Các bạn cần Thêm Tiện ích Biểu Mẫu Liên Hệ bằng
cách :
-vào Bố Cục thêm Tiện ích và chọn thêm Biểu Mẫu Liên Hệ
*Tiếp Theo :
* Ctrl + F tìm thẻ ]]></b:skin> và chèn đoạn code trên thẻ ]]></b:skin> :
-vào Bố Cục thêm Tiện ích và chọn thêm Biểu Mẫu Liên Hệ
*Tiếp Theo :
* Ctrl + F tìm thẻ ]]></b:skin> và chèn đoạn code trên thẻ ]]></b:skin> :
#ContactForm1{ display:none; } #contact_wrap { margin: auto; width: 321px; height: 380px; padding: 25px; border-radius: 1em; border-top:1px solid #dbdbdb; border-right:1px solid #b2b2b2; border-left:1px solid #dbdbdb; border-bottom:1px solid #9d9d9d; background-color:#cccccc; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); box-shadow: 1px 1px 5px #ccc; } #contact_wrap h3{ color: #e8f3f9; font-family:Georgia; font-size: 20px; font-style:italic; font-weight:bold; margin: 0 -36px 20px -36px; padding: 12px; text-align: center; text-shadow: 2px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; position: relative; } #contact_wrap h3:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #333 transparent transparent transparent; } #contact_wrap h3:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #333; } #ContactForm1_contact-form-name{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCms7PYxNMnGCCFaXIsLp28n7IZI5B8fDIP6KeIt-e5y867K-pLPRbmb3AXTX4gTZxAUzjjKD8Y9a-RhcxlbljSeZaev2onoUPbC04-8iWNc94R9gcg7lllxXA5pAxWS-WmtPgf-dxJYE/s1600/user.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjsx2I6jmbNL54TsZRAGnoeVkiwwPcTwssO1_DyhB3RxKcvW8t2lGPJ0kzQUVAjxFmJFSaEmUBC8c_9phTvQMo1KouBVJLdLT77nhZ_IkugsQFc416HTSv19T3y4HTERAwy6N23Qkqv4/s1600/pen.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email-message{ width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; font-family:Arial, sans-serif; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3w2YhTdlxa2Ah07dVxFgE_koeoZWw0tFSwzPC9a2EoT8A4TCI7X3EW9jMcws2dfpYPULnIIxkPVb2uteKixfFAzNOtS2dZqnszaECfqW1F0AS9-3xHkKm9SQnyRCa6-xXwvLMxVZ7tAo/s1600/msg2.png)no-repeat 10px 10px; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #FFF; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#005a8a; border-radius:4px; text-shadow: 1px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; border:1px solid #194f6d; } #ContactForm1_contact-form-submit:hover { background:#4c9bc9; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 320px; margin-top:35px; }
* Bước
tiếp theo đặt trang Contact này vào một vị trí
cố định bằng cách :
-vào Trang =>
tạo một trang mới
-chuyển
sang chế độ viết HTML và dán đoạn code này vào và xuất
bản.
div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<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>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style
P/S : như
vậy là ta đã tạo được một trang Contact liên hệ
đẹp , và mình cũng đã áp dụng cho Blogspot của mình.
-mọi thắc
mắc cac bạn vui lòng cmt mình sẽ giải đáp
-chúc các
bạn thành công.
tư liệu
từ #www.terocket.com
0 nhận xét