Silakan Anda pilih 4 - Style Widget Email Subscription di bawah ini :
1). Style #1
Kode-nya di bawah ini :
<style>
.Berbagi Tips Blogger-email{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpb4RVH4wrulxdHENKcFrNAdrDIbyB0nRPhynJ-WdQBInW72YuFF-MKhPx4Z4u4PyJG9XWQ51bvupnJpC_jN1lC8ZbnTk6Zi7cNGTYzDC2-mZBTUWv1qYkIk-ZdG2IQ-syQlFNT80rLVk/s1600/shinemat-email-icon.jpg) no-repeat 25px 1px ;
width: auto;
float: left;
font-family: Arial;
font-size: 1.2em;
font-weight: bold;
margin: -1px 10px -5px -20px;
color: #686B6C;
}
.ujangyoyo-emailsubmit{
background: #131313;
border: 1px solid #000000;
cursor: pointer;
color:#ffffff;
padding: 4px;
text-shadow: 0 -1px 1px #080000;
-moz-border-radius: 6px;
border-radius: 6px;
font:15px "Arial";
font-weight: bold;
}
.Berbagi Tips Blogger-emailsubmit:hover{
background: #3C3B3B;
border:1px solid #000000;
-moz-box-shadow: 0 0 5px #3A3A3A;
box-shadow: 0 0 5px #3A3A3A;
}
.Berbagi Tips Blogger-textarea{
padding: 4px;javascript:void(0)
margin: 6px 2px 6px 2px;
background: #f9f9f9;
border: 1px solid #BFBBBB;
resize: none;
-moz-box-shadow: 0 0 5px #3A3A3A;
box-shadow: 0 0 5px #3A3A3A;
font-size: 13px;
width: 160px;
color: #FF7D00;
}
.Berbagi Tips Blogger-textarea:hover{
border-color: #000000;
-moz-box-shadow: 0 0 5px #3A3A3A;
box-shadow: 0 0 5px #3A3A3A;
}
.Berbagi Tips Blogger a{
padding: 3px 3px 3px 3px;
display: inline-block;
background: #F4F1F1;
border: solid 1px #C9C9C9;
border-radius: 4px;
-moz-border-radius: 4px;
}
.Berbagi Tips Blogger a:hover {
border-color: #727171;
-moz-box-shadow: 0px 0px 3px #7C7C7C;
box-shadow: 0px 0px 3px #7C7C7C;
}
.Berbagi Tips Blogger-followbox{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEine4T7bXSdP_pNJVhXBV1yEvGsyOGGktFemoShu6QPtagy8Pktai1s70_8Xr0G4V3pKrA_NDMKX8QhK4-zxBfcFw-wCR8WmxpV8zyCgNeBgGu5Er0mNGlozRDGzdApIsGP2DFpXwqkLhk/s1600/fb-twitter-shinemat.png) no-repeat 237px 53px ;
padding: 5px;
border: 1px solid #C9C9C9;
-moz-border-radius: 8px;
border-radius: 8px;
color: #686B6C;
}
.Berbagi Tips Blogger-followbox:hover{
background: #F5FCFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLFRXSsM90jTiNiXZUdbbacKAb0uL5vVTuRbA1FuSbj6ocO21S5Km9XI7MO9zrV6vCA33Ps_HZ9afsfgX2Upk9i8FeUvHT_Nod7swQSXV07XyCXRwRUj0_MJd120pfgOKIH9OI8szYDjs/s1600/fb-twitter-shinemat-hover.png) no-repeat 237px 53px ;
padding: 5px;
border: 1px solid #727171;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0px 0px 3px #7C7C7C;
box-shadow: 0px 0px 3px #7C7C7C;
}
</style>
<center>
<div class="Berbagi Tips Blogger-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="Berbagi Tips Blogger-textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" /><input type="hidden" value="ID FEEDBURNER ANDA" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="Berbagi Tips Blogger-emailsubmit" value="Submit" type="submit" />
</form></div><br /><br /><br />
<b><font size="2" face="Arial" color="#686B6C">...and receive awesome posts to your mail inbox</font></b>
</center>
2). Style #2
Kode-nya di bawah ini :
<style>
form.feedburner{
margin-bottom;5px;
display:block;
clear:both;
}
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOKvSS9au9fx4lnuxnewS2ECnqBdPdF5Nme_GdzaFqWGhBnzoE8VZoTZHw00RU3On6mE8_75scOlrBt3mCRbDAZWkRXvniA4inGyB2L7fwb7SrJS7REOHIKlAy8IkaOn6bZuQyAxDP9mo/s1600/email.png) no-repeat scroll 4px center transparent;
padding:9px 20px 9px 35px;
color:#666;
font-weight:bold;
text-decoration:none;box-shadow: #B3B3B3 5px 5px 5px;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 5px 5px 7px #CCC inset;
}
.RBsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 20px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:auto;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
<div style='align:center;float:center;text-align:center;'><div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 16px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri= ID FEEDBURNER ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ID FEEDBURNER ANDA'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='RBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
3). Style #3
Kode-nya di bawah ini :
<style>
.tbisubscribe {
padding: 0px;
padding-top:5px;
width: 250px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 11px "trebuchet ms", sans-serif;
padding: 7px 7px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 9px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 9px 3px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 15px Oswald, cursive; margin: 0px 0px 0px 5px;'>Get Free Updates in your Inbox</div>
<div style='margin: 0px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER ANDA', 'popupwindow', 'scrollbars=yes,width=400,height=400');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ID FEEDBURNER ANDA' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
</div></div>
4). Style #4
Kode-nya di bawah ini :
<style>
.rb-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTic_tIIaBoJWQ_26zHJhubWNlns4T2yA1lciGZwy8Lf5Z3m7yoYxSf9KsJiLktNVv-dm_2i0M4Gta3xK3OdqhXqJKuuKF5hsk_JTgaoM4Y5q5nQwhBOinra_lsjKelAUk-rxNoh5Iv5T/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.rb-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.rb-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="rb-email">
Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER ANDA', 'popupwindow', 'scrollbars=yes,width=400,height=400');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ID FEEDBURNER ANDA' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
type='text' value='Enter your email address here...' />
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div>
Untuk cara penerapan-nya di Blog, sbb:
1. Login di Blogger >> Tata Letak >> Add Gadget >> Gadget
2. Masukkan Kode Widget Email Subscription yang Anda suka
3. Ganti 'ID FEEDBURNER ANDA' dengan 'ID FEEDBURNER ANDA'
4. Simpan Gadget Anda dan nikmati hasilnya. Selamat mencoba.Thanx
No comments:
Post a Comment