Cara Buat Form Berlangganan Cantik

Saya telah berbagi banyak tutorial pada formulir RSS Berlangganan seperti Form Berlangganan Email dan Langganan Feed Widget dan hari ini kita belum lagi tetapi sangat indah dan mudah untuk mengedit  widget Email Subcription dengan efek CSS baru. Widget ini akan membuat sidebar Anda rapi dan bersih dan pasti akan menarik pengunjung untuk berlangganan.

How To Add this Subscription Form To Blogger?

 <style>
    .mbt-email{
    background:url(http://i53.tinypic.com/2igja0n.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;
    }

    .mbt-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;
    }
    .mbt-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="mbt-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=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
    <input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input class="mbt-emailsubmit" value="Submit" type="submit" />
    </form>
    </div>

Sekarang buatlah perubahan Ini:

     * Sekarang ganti http://feedburner.google.com/fb/a/mailverify?uri=TntByStc dengan Email Feedburner Feed  link anda. Anda Bisa mendapatkannya dengan mengunjungi akun feedburner kemudian arahkan ke Mempublikasikan dan kemudian ke Langganan Email.
     * Ganti TntByStc dengan judul feed Anda. Ia muncul pada akhir link feed Anda. Dalam kasus saya itu http://feedburner.google.com/fb/a/mailverify?uri=TntByStc

Simpan widget Anda dan melihat blog Anda menampilkan hidup-hidup! :)