Truyện Cười BlogTaPhiet KC

Chat Box


--------------:Search

Đang tải...

Thứ Hai, ngày 05 tháng 12 năm 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(http://4.bp.blogspot.com/_A6olrRvpvSc/SxdORXvleSI/AAAAAAAAAsE/oEDfOZeHLQ0/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(http://2.bp.blogspot.com/_A6olrRvpvSc/SxdKrkiilCI/AAAAAAAAAr0/cah3UeTk97A/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(http://2.bp.blogspot.com/_A6olrRvpvSc/SxdKoyxhWYI/AAAAAAAAArs/1vB2Sapbr9M/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(http://1.bp.blogspot.com/_A6olrRvpvSc/SxdOT3louhI/AAAAAAAAAsM/6sYrlHZy40U/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(http://3.bp.blogspot.com/_A6olrRvpvSc/SxdOO-ByezI/AAAAAAAAAr8/vYM9DxV7jb0/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(http://4.bp.blogspot.com/_A6olrRvpvSc/SxdOWRSpU2I/AAAAAAAAAsU/xCUKPdRZ8WE/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: 5z5.com
Share/Save/Bookmark

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa
Top