Membuat widget email subscribtion Aweber stylelish

     Membuat widget email subscribtion cantik blogspot/blogger - Ohayou Gozaimase! Pada tutorial kali ini, saya akan membahas tentang Cara memodifikasi Email Subscribtion Blogspot. Untuk Screenshootnya seperti ini gan :

 Cara Membuat Widget 
1. Login blog -> Tata letak.
2. Add gadget -> HTML/Java script.
3. Copas script dibawah ini.

<div class="subscribe_outer">

<div class="subscribe_wrapper">

<h5>Subscribe Via Email</h5>

<p>Get free infoiki updates! Enter Your email! </p>

<div id="btntEmailsub">

<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feedburner Username', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">

<input type="hidden" value="Your Feedburner Username" name="uri" />

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

<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter your email...") {this.value="" }" onblur="if (this.value == " ") {this.value="enter your email..." ;}" name="email" />

<input class="emailButton" type="submit" value="Signup Now! (FREE)" title="" />

</form>

</div>

<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://infoiki.blogspot.com/2012/10/membuat-widget-email-subscribtion.html">widgets</a></p> 

</div>

</div>

<style>

.subscribe_outer {

    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/color-chronicl.gif") repeat scroll 0 0 transparent;

    margin: 0 -10px;

    padding: 5px 0;

}

body {

    color: #272727;

    font-family: Georgia,"Times New Roman",Times,serif;

}

body {

    color: #272727;

    font-family: Georgia,"Times New Roman",Times,serif;

}

.sidebar .subscribe_wrapper h5 {

    color: #FFFFFF;

}

.sidebar h5 {

    color: #272727;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-size: 15px;

    font-weight: normal;

    padding: 4px 0 10px;

}

h5, h6 {

    letter-spacing: 2px;

    text-transform: uppercase;

}

.sidebar .subscribe_wrapper h5 {

    color: #FFFFFF;

}

.sidebar h5 {

    color: #272727;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-size: 15px;

    font-weight: normal;

    padding: 4px 0 10px;

}

h5, h6 {

    letter-spacing: 2px;

    text-transform: uppercase;

}

.subscribe_wrapper {

    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/pattern-chronicl.png") repeat scroll 0 0 #333333;

    color: #CCCCCC;

    font-size: 14px;

    line-height: 20px;

    padding: 38px 50px 18px 38px;

}

.emailButton {

    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FE9A2E;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

    width: 100%;

}

.emailText {

    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;

    color: #444444;

    margin: 0 0 15px;

    padding: 10px 40px;

    text-decoration: none;

    width: 70%;

}

input, textarea {

    font-family: Georgia,"Times New Roman",Times,serif;

}

.subscribe_wrapper {

    color: #CCCCCC;

    font-size: 14px;

    line-height: 20px;

}

.post-body .emailButton {

    width: 300px;

}

.emailButton {

    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FE9A2E;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

    width: 100%;

}

</style>

4. Klik Save.

Keterangan...........
1. Kode berwarna hijau adalah judul widget.
2. Kode berwarna biru muda adalah teks-nya.
3. Ganti kode berwarna kuning  dengan username feedburner agan.
4. Kode berwarna merah  adalah kode CSS widget. Silahkan modify sendiri y!