Cara Membuat Email Subscribe Form agar Lebih Menarik

Pada kesempatan ini saya akan mengulas cara membuat form email subscription agar menjadi lebih menarik.

Sebagai contoh, saya telah menyiapkan sebuah form seperti berikut.

Form tersebut nanti bisa kamu modif dengan mengganti gambar, teks, dan tata letaknya sesuai keinginan. Ok mari kita mulai...


Untuk membuat form ini ada beberapa bahan yang harus disiapkan yakni:

1. Gambar latar belakang dan icon RSS yang berukuran 16x16 pixel. Jika kamu belum punya, bisa cari iconnya di Google. Ada banyak icon gambar Rss Feed. Setelah mendownload icon gambar yang di inginkan. Upload icon tersebut ke situs image hosting yang sering anda gunakan. Contoh http://t1.gstatic.com/images?q=tbn:ANd9GcR_IbCXHrgV3xcfKkGXKN940KBD06-EYRtjWK_Ju-ZqR4LdM4Sx5A

2. Id feedburner kamu. Contoh, http://feeds.feedburner.com/idkamu. Tulisan yang dicetak tebal itulah id feedburner kamu.

Bagaimana cara mengetahui id feedburner saya?
Caranya sangat mudah, login ke akun feedburner anda kemudian arahkan kursor mouse anda pada logo feed yang terletak disamping judul feed seperti yang dilingkari garis merah pada gambar dibawah. Kemudian perhatikan url dipojok kiri bawah (mungkin sekarang ada di sebelah pojok kanan bawah). Contoh http://feeds.feedburner.com/d3moblogs, yang dicetak tebal adalah id feedburner kamu


3. Aktivasi feed count
Feed count adalah sebuah widget mungil yang menampilkan jumlah subscriber atau feed reader kamu dalam bentuk angka. Untuk dapat menikmati fitur feed count ini kamu harus mengaktifkannya terlebih dahulu. Caranya, buka id feedburner anda lalu pilh tab Publicize. Pada bagian Service pilih Feed count, kemudian klik tombol Active. Selesai.



Setelah menyiapkan bahan-bahan yang diperlukan. Selanjutnya pasang kode form tersebut di blog kamu. Ikuti langkah-langkah berikut:

1. Login ke Blogger. Masuk ke menu Design -> Page Elements
2. Klik Add a Gadget/Tambah gadget lalu pilih HTML/Javascript
3. Copy kode dibawah kedalam kotak

<style>
.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:380px; /* panjang form */
height:180px /* tinggi form */
}

.rss {
background: url("http://t1.gstatic.com/images?q=tbn:ANd9GcR_IbCXHrgV3xcfKkGXKN940KBD06-EYRtjWK_Ju-ZqR4LdM4Sx5A") no-repeat top right;
}

.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 11px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/tandatanyanews"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKiTVW6fZ2ItrRzUk6adTsigPqd8YZpRNs5IglJV1QlFfyDsr83baZYUXfEmdoBoL0wrS2xfI88qrOdD-sY5OIGys_sJ81cbOs8_vMOcAI2Gbidci63X96tJKGBsCY84PTu6TGd5lVqepY/s800/005.png" /></a> <a href="http://feeds.feedburner.com/tandatanyanews">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tandatanyanews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="tandatanyanews" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>
<p><a href="http://feeds.feedburner.com/tandatanyanews"><img src="http://feeds.feedburner.com/~fc/tandatanyanews?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
</div></div>

Keterangan :
Merah = alamat URL gambar background
Abu - abu = posisi gambar background, kamu bisa merubah posisi gambar background dengan kode ini :

Top right: Kanan atas
Top left: Kiri atas
Bottom right: Kanan bawah
Bottom left: Kiri bawah

 Merah tua Bold = id feedburner, ganti dengan id milik kamu.
Biru = alamat gambar icon rss
Hitam Bold = kalimat dalam form, ganti jika kamu ingin menggunakan kata - kata lain
Oranye = nama tombol
Hijau =  kode HTML feed count

4. Jika sudah, klik Save/Simpan.

Selesai... Selamat mencoba...