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

 ™» CGC Blog «™ 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/AVvXsEggSKtxv_YRty-YpvWayRuvHO4EKfR1z9wwDnNdF6rO7MWIGnNGFEoVG8qtRGf6o07-Xl2JIXFqk0bVQteJZdfP64iXdwsqKH3zm-u4C0NeggtxcuriS0s_k9RFOzZXNEqiDg5V43dkx1E9/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/AVvXsEgAxRNPRIwCz5YssSbhSwRHQgxgKMXtjtwqH3mFmUTq6n9_9R2pOpAAzHYNbKEn3MUbZ1AIvpX3w1Yayo7pve9dlzdiUwd9dqwVh52QPfsQ20d0VjKK4SWn6SwzLCFiJ1xDl26Uut2QNJdf/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 == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" 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/AVvXsEi0-LQ1Vq3qM8GhNjaRSW1JG-JA7C_oh5d1TiBDLv-bNJ92d-P9Lj8wqyaZwhQXu7bjRVFcoMro0VQkbkiJRqx_Ll_Geulojach9dOncgHOXwCXt22AIENQb4jR4jxvRSlNOgSKMrNWcXZP/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/AVvXsEg-9EcTN60nj0RTTZZJ6M2koKGs6ceGeezjuLMItuxGdgpPaE1YAH34sEvafM0_RaSXTP-SPcN5hfpZ8D7yHuVNJOGYiAnbqI1DGg-fdoPtGjNZYcjlvjGXgoWCr1BaTxy4HMrVaEenjLWe/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 == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" 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/AVvXsEi5wfSVGdZXwpHb2ZPQlotoKlCV2oc_KLsZAlk8DKQSpzORqmy5APAbnQSF-QbZ589K1VPLe4kuLynWMB-ZTr3zLrZXPEGuv4ve1mzXHI75YxKSNmAca-VPUkil0lSg2j5Ng2e_Yy_sv1WU/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/AVvXsEhfwj4JAUAOJhJy4dssiQDw0z24Ac6sDtwrolzy77VMij_-jSdrdlMWE-b3WDfJN5-pBoYzpopXiZpA7LWzTjF8VszT40JTRS6DV7gk10-av2e8vGRD39f9EA7tuZT2lq8KrY_yd_ifNJ_X/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 == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" 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>

Thay  Your-Feed-Title bằng ID Feed của bạn. Nếu bạn chưa biết cách lấy ID Feed có thể để lại comment để được hướng dẫn.

Nguồn : quangpro1610.blogspot.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!