Membuat Widget email subscription pro bloggers v3

    Membuat widget email subscribtion pro bloggers v3 - Akhirnya widget v3 ini lahir juga. Pada versi kali ini, widgetnya akan terlihat lebih keren, stylish, fresh dll. Untuk cara membuatnya agan hanya perlu menuju ke tata letak -> Add gadget -> lalu klik html/java script. Copy paste kode berikut ini.

<div class="post-after-container"><div id="email_icon"></div><h4>Subscribe Blog Ane</h4>



<div style="padding-bottom:10px;padding-left:60px;">

 Dapatkan artikel terbaru dari <a href="http://infoiki.blogspot.com">INFOIKI</a> yang akan dikirim ke email anda secara gratis!</div>

<div style="padding-left:60px;">


<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">

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

<input class="email" type="text" style="width: 250px; font-size: 15px;" id="email" name="email" value="Your_email@example.com" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />    
            <input type="hidden" value="Infoiki" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input class="subscribe" name="commit" type="submit" value="Subscribe" />

</form></div></div></div></div>

<style>

#email_icon {
  background: url('http://www.mkyong.com/wp-content/themes/mkyongnew/images/email.png') no-repeat;
  height: 86px;
  width: 79px;
  display: block;
  position: absolute;
  float: left;
  margin-left: -35px;
  margin-top: 35px;
}

.post-after-container {
    background-color: #FFFFFF;
    border: 1px solid #E4E4E7;
    margin: 0 20px 20px 0;
    padding:20px;
}

.post-after-container h4 {
    font-size: 16px;
    margin:0 0 18px;
    padding:0;
}



#email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:34px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:57px;
    }


</style>

   Keterangan 
1. Kode berwarna MERAH adalah judul dari widget.
2. Kode berwarna ORANGE adalah keterangan widget. 
3. Kode dengan tulisan INFOIKIganti dengan username feedburner agan.
4. Kode dengan tulisan YOUR_EMAIL@EXAMPLE.COMadalah teks yang berada pada kolom pengisian email.  
5. Terakhir, kode berwarna HIJAU adalah teks tampilan button. bisa agan ganti dengan teks kirim, send it, dll. 

Save dan lihat hasilnya!!

Twitter Delicious Digg Facebook Stumbleupon RSS