Jumat, 06 April 2012

Design Style Subscribe Dengan CSS

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
Design  Style Subscribe Dengan CSS
Style Subscribe Box 1
Script  Style Subscribe Box 1
<style>
#han-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="han-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=vicahya&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='vicahya'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe'/>
</center></form></div>
</div>
Style Subscrib Box 2
Style Subscrib 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=vicahya&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='vicahya'/>
<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=vicahya&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='vicahya'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe'/>
</center></form></div>
</div>
Style Subscrib Box 4
Style Subscrib Box 4
<style>
#lutfi-kotak-orange {
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(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
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-orange .div {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
-moz-border-radius: 10px;border-radius: 10px;margin:10px 10px 10px 10px;
}
#ltf-box-orange h1{
margin-top:5px; color: #FF6600;font-family:georgia;
font-size:25px;margin-bottom:5px;
padding:0;text-shadow:0 2px 3px #000;line-height:35px;
}
#ltf-box-orange 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-orange .submit{
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
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-orange .submit:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
#ltf-orange .submit:active{
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>
<div id="lutfi-kotak-orange">
<div id='ltf-box-orange'>
<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=vicahya&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='vicahya'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe'/>
</center></form></div> </div>
Style Subscrib Box 5
Style Subscrib Box 5
 <style>
#lutfi-kotak {
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(#243d63), to(#1a2638));
background: -moz-linear-gradient(top,  #243d63,  #1a2638);
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-red .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-red h1{
margin-top:5px; color:#d81b21;
font-family:georgia;font-size:25px;margin-bottom:5px;
padding:0;text-shadow:0 2px 3px #000;line-height:35px;
}
#ltf-box-red 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-red .submit{
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
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-red .submit:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
#ltf-red .submit:active{
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
</style>
<div id="lutfi-kotak">
<div id='ltf-box-red'>
<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=vicahya&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='vicahya'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe'/>
</center></form></div> </div>
Jika Sobat suka dengan Style Subscribe diatas silahkan sobat copy vaste script HTML dan Script CSS dan simpan di blog sobat. Good Luck Happy Blogging 
Warning : vicahya
di ganti dengan feedburner anda .
Agen Bola online Agen Bola online

Tidak ada komentar:

Posting Komentar

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank