Bismillah . . . Pada postingan kali ini saya akan share beberapa style kotak 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.
Oke daripada kesana kemari (ngomong yang tidak jelas)
lutfie tutorial blog akan mengajak langusng ke
Design Subscribe dengan CSS. 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('http://feedburner.google.com/fb/a/mailverify?uri=Lutfietutor', '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='Lutfietutor'/>
<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=Lutfietutor', '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='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('http://feedburner.google.com/fb/a/mailverify?uri=Lutfietutor', '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='Lutfietutor'/>
<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=Lutfietutor', '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='Lutfietutor'/>
<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('http://feedburner.google.com/fb/a/mailverify?uri=Lutfietutor', '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='Lutfietutor'/>
<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 
Post A Comment:
0 comments: