Design Style Subscribe Dengan CSS

jika sobat bertanya tanya apa itu Subscribe? jika diartika dalam bahasa indonesia pasti sobat akan lebih mengerti dan lebih paham dengan yang saya maksud. Subscribe jika diartikan dalam bahsa indonesia adalah berlangganan, misalkan sobat sering melihat situs/blog orang lain dengan tampilan subscribe yang menarik dan enak dipandang mata.
disini saya punya beberapa style, jika sobat tertarik silahkan pakai dan tempelkan di blog, tapi saya yakin temen temen lebih pandai dan lebih pintar daripada saya. oke yang pertama saya punya style seperti di bawah

Style Subscribe Box 1

Script  Style Subscribe Box 1

============================================

<style>

#lutfi-kotak-white {

padding: 20px 20px 20px 20px;

-webkit-box-shadow: 0px 0px 10px 5px #000;

-moz-box-shadow: 0px 0px 10px 5px #000;

box-shadow: 0px 0px 10px 5px #000;

background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));

background: -moz-linear-gradient(top, #ededed, #fff);

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-webkit-box-shadow: 0px 1px 0px #000;

border: 2px #ffffff solid;

width:500px;

}

#ltf-box-black .div {

color: #80bed6;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));background: -moz-linear-gradient(top, #0078a5, #00adee);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius:10px;margin:10px 10px 10px 10px;

}

#ltf-box-black h1{

margin-top:5px; 

color:#666;

font-family:georgia;

font-size:25px;

margin-bottom:5px;

padding:0;

text-shadow:0 2px 3px #000;

line-height:35px;

}

#ltf-box-black input{

background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;

border:medium none;

border-radius:10px 10px 10px 10px;

font-size:14px;padding:10px;

text-shadow:1px 1px 0 #FFF;

width:280px; color:#666; 

font-family:georgia; 

margin-bottom:5px;

}

#ltf-box-black .submit{

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));

background: -moz-linear-gradient(top, #000, #444);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');

color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;

text-shadow:0 1px 2px #000;width:120px; font-family:georgia; 

margin-left:5px;

}

#ltf-box-black .submit:hover{

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));

background: -moz-linear-gradient(top, #000, #444);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

}

#ltf-black .submit:active{

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));

background: -moz-linear-gradient(top, #000, #444);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

} 

</style>

<div id="lutfi-kotak-white">

<div id='ltf-box-black'>

<center><h1>Subscribe To Get FREE Tutorials!</h1></center>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Lutfietutor&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'/> 

<input name='uri' type='hidden' value='Lutfietutor'/> 

<input name='loc' type='hidden' value='en_US'/> 

<input class='submit' type='submit' value='Subscribe'/>

</center></form></div> 

</div>

============================================

Style Subscrib Box 2

Script  Style Subscribe Box 2
============================

<style>
#lutfi-kotak-green {
padding: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-moz-box-shadow: 0px 0px 10px 5px #000;
box-shadow: 0px 0px 10px 5px #000;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 1px 0px #000;
border: 2px #009900 solid;
width:500px;
}
#ltf-box-green .div {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
-moz-border-radius: 10px;
border-radius: 10px;
margin:10px 10px 10px 10px;
}
#ltf-box-green h1{
margin-top:5px; 
color:#009900;
font-family:georgia;
font-size:25px;
margin-bottom:5px;
padding:0;
text-shadow:0 2px 3px #000;
line-height:35px;
}
#ltf-box-green input{
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
border:medium none;
border-radius:10px 10px 10px 10px;
font-size:14px;padding:10px;
text-shadow:1px 1px 0 #FFF;
width:280px; color:#666; 
font-family:georgia; 
margin-bottom:5px;
}
#ltf-box-green .submit{
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;
text-shadow:0 1px 2px #000;width:120px; font-family:georgia; 
margin-left:5px;
}
#ltf-box-green .submit:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
#ltf-green .submit:active{
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
} 
</style>
<div id="lutfi-kotak-green">
<div id='ltf-box-green'>
<center><h1>Subscribe To Get FREE Tutorials!</h1></center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Lutfietutor&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'/> 
<input name='uri' type='hidden' value='Lutfietutor'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='submit' type='submit' value='Subscribe'/>
</center></form></div> 
</div>

============================

Style Subscrib Box 3

Style Subscrib Box 3
==========================================

<style>
#lutfi-kotak-blue {
padding: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-moz-box-shadow: 0px 0px 10px 5px #000;
box-shadow: 0px 0px 10px 5px #000;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
border-radius: 10px;-moz-border-radius: 10px;
-webkit-border-radius: 10px;-webkit-box-shadow: 0px 1px 0px #000;
border: 2px #ffffff solid;width:500px;
}
#ltf-box-blue .div {
color: #80bed6;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
-moz-border-radius: 10px;border-radius: 10px;margin:10px 10px 10px 10px;
}
#ltf-box-blue h1{
margin-top:5px;color: #0033FF;
font-family:georgia;
font-size:25px;
margin-bottom:5px;
padding:0;
text-shadow:0 2px 3px #000;
line-height:35px;
}
#ltf-box-blue input{
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
border:medium none;
border-radius:10px 10px 10px 10px;
font-size:14px;padding:10px;
text-shadow:1px 1px 0 #FFF;
width:280px; color:#666; 
font-family:georgia; 
margin-bottom:5px;
}
#ltf-box-blue .submit{
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;
text-shadow:0 1px 2px #000;width:120px; font-family:georgia; 
margin-left:5px;
}
#ltf-box-blue .submit:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
#ltf-blue .submit:active{
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
} 
</style>
<div id="lutfi-kotak-blue">
<div id='ltf-box-blue'>
<center><h1>Subscribe To Get FREE Tutorials!</h1></center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Lutfietutor&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'/> 
<input name='uri' type='hidden' value='Lutfietutor'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='submit' type='submit' value='Subscribe'/>
</center></form></div> 
</div>

==========================================