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


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('http://feedburner.google.com/fb/a/mailverify?uri=vicahya', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == "") {this.value = "Masukan Alamat E-mail...";}' onfocus='if (this.value == "Alamat Email...") {this.value = ""}' 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('http://feedburner.google.com/fb/a/mailverify?uri=vicahya', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == "") {this.value = "Masukan Alamat E-mail...";}' onfocus='if (this.value == "Alamat Email...") {this.value = ""}' 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>
#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('http://feedburner.google.com/fb/a/mailverify?uri=vicahya', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == "") {this.value = "Masukan Alamat E-mail...";}' onfocus='if (this.value == "Alamat Email...") {this.value = ""}' 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('http://feedburner.google.com/fb/a/mailverify?uri=vicahya', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == "") {this.value = "Masukan Alamat E-mail...";}' onfocus='if (this.value == "Alamat Email...") {this.value = ""}' 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>
#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('http://feedburner.google.com/fb/a/mailverify?uri=vicahya', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == "") {this.value = "Masukan Alamat E-mail...";}' onfocus='if (this.value == "Alamat Email...") {this.value = ""}' 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 .

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Design Style Subscribe Dengan CSS. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

<a href="http://bungkaryo.blogspot.com/2012/04/design-style-subscribe-dengan-css.html" target="_blank">Design Style Subscribe Dengan CSS</a>

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Design Style Subscribe Dengan CSS

BlogKaryo

Design Style Subscribe Dengan CSS

Kamis, 05 April 2012

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

No Responses to "Design Style Subscribe Dengan CSS"

Posting Komentar

Category

Blog Tips