Thiết kế E-mail Subscription Form với CSS

Thứ Hai, 5 tháng 12, 2011

Thiết kế E-mail Subscription Form với CSS

Bạn muốn làm đẹp E-mail Subscription Form và thay đổi sự đơn điệu của form mặc định. Rất đơn giản, bạn chỉ cần tạo một Widget cho nó và bạn có thể hoàn thành nó một cách dễ dàng và dưới đây là 3 kiểu E-mail Subscription Form được thiết kế với CSS. Hi vọng bạn sẽ thích nó trong việc trang trí E-mail Subscription Form.

Để thao tác, Đăng nhập Blog > Thiết kế > Phần tử trang > Thêm tiện ích HTML/ Javascript và dán code bên dưới vào. Bạn có thể tùy chỉnh CSS để form được đẹp hơn.

1.Subscription Form Widget 01:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvyBYDD7KmoynAqHQgmQoO0a82t4kgSfwTkKSm1TGH7Vq_iQXV-fMrqLv2qthdGFZZwiia5XDMk5ot4fyY86OOzPXBtnqrDOouaGcyUIJ37wYM-Y9guSCjZDMtOo2WfAz4QgbVLupAIzO/s1600/feedbg3.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQNC9neTp-6uFhEBCp-xBBHXRfxtsgEVuF3qHHri0VZn8P8hXUw68NIpEZQ8HpkvM1M8sdh2_dzBY91t3dqpvokWld-juINnQd2zTYrGjF-X8f-KpLR4cC7bBkTGfpct-ChM9PlJx9J5-/s1600/go_b.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == "email address here") {this.value = "";}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == "") {this.value = "email address here";}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

2.Subscription Form Widget 02:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2HcRQSTWHA-ziUaIDP39atr0ZaUIxu4HrqMsWY01EEPjy0VF_sW9zjA3T7izVgCNX_XeHhiRRDgcG9PXTCiD9A86ybXcP27epsnEJu0Pa7nbMmBmTIfcXGuKtBr2yqpv97dtejzoQ-PxF/s1600/feedbg1.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZ9GslKG-bzUMvkPm02bn7Nrg2JFzOQRDS63I55rC9-DZ4_aiH2mynkrP_TVYZ8eKsxzR-HdrJzPAHUGGnWcvgBE9ZutNzfJpwSFROadxeTDGrh3WJvNEMgaU5b9WidNGR5qGL9XPMFQt/s1600/go_g.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == "email address here") {this.value = "";}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == "") {this.value = "email address here";}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

3.Subscription Form Widget 03:

<style>#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxtYajEEjEiBg6tcO_rJpO7k9A15NWUa-24i_SsSc9QJqPlzAGfjSnp8cSg8p3MBHzMjdOCCEvh1_AuGZudIEC9Z1_AcGHVUCTwQ6GzEsGncza6ZSnIPVT3pSP6Fh6LoZZSsH2e61g-xI/s1600/feedbg2.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOv9S4a_jv8Ig8TEQ15tssuBVJt-G4X-TkslT3TlGQNOUfn0gDmnfAJvCSKC4lptlFa3Lii3AQDrHuhkz_YUbl571roEHxXNcXZOj3eRuypIf6D4lIbHAzNB77fpqUtzMeZbNuGebS-HP/s1600/go_o.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == "email address here") {this.value = "";}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == "") {this.value = "email address here";}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>