Cara Bikin Form atau Widget Kotak Berlangganan via email

Bagaimana wujudnya ?, Coba lihat gambar di samping atau perhatikan form berlangganan di pojok kanan atas blog ini.. Nah begitulah kira-kira :), Bagi yang belum mengetahui, itu fungsinya apa toh ?






Fungsi form berlangganan:
Pengunjung bisa mendapatkan updated terbaru artikel yang di posting di blog kita melalui emailnya masing-masing

Caranya ?
Tentu saja pengunjung harus mendaftarkan emailnya di form yang sudah di sediakan, seperti contoh diatas. Anda ingin berlangganan artikel terbaru dari blogger-coepoe ? - silahkan daftarkan melalui email anda dan jangan lupa aktifkan melalui email konfirmasi yang di terima setelah pendaftaran selesai.

Emang punya pelanggan apa gunanya ?
Tentu saja sangat berguna. Semakin banyak pelanggan akan semakin banyak pengunjung yg mampir ke blog kita, apalagi jika kita sering posting artikel baru. Pelanggan pun akan menerima email setiap ada updated terbaru dari blog kita :)

Gimana cara bikinnya ?
Gampang, ikutin aja petunjuknya di bawah. Saya akan memberikan tip bagaimana :

1. Membuat Form Berlangganan Untuk Sidebar
2. Membuat Form Berlangganan Untuk di bawah Postingan

Pertama, Daftar dulu di feedburner.com, tujuannya untuk mendapatkan alamat feed blog kita. Tidak perlu saya jabarkan bagaimana cara mendaftarnya, karena langkah-langkahnya sangat mudah. Tinggal masukkan alamat blog sobat, selanjutnya ikutin sesuai navigasi yang ada di webnya. Saya yakin tidak sulit. Tapi ada satu yang harus di perhatikan. Setelah pendaftaran, jangan lupa "Aktifkan" fungsi Email Subscribtions. Klik Tab Publicize >> Klik Email Subscribtions >> Aktifkan

Klik Edit Feed Details, selanjutnya akan muncul tampilan seperti gambar di bawah ini :

 

Yang harus di perhatikan adalah Alamat URL Feed blog kita, contohnya punya Blogger Coepoe alamatnya: http://feeds.feedburner.com/BloggerCoepoe. Yang saya tandai warna merah bisa di ubah sesuai identitas blog anda

Membuat Form Berlangganan Untuk Sidebar
Model 1

Langganan Artikel Terbaru BC via Email

	» Cek Email Anda untuk konfirmasi berlangganan

Script Model 1 :

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogcapoenk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" action="http://feedburner.google.com/fb/a/mailverify" style="border: 0px solid rgb(222, 222, 222); padding: 3px; text-align: left; background: url(&quot;http://3.bp.blogspot.com/_c6kkookxcew/sdzycinypwi/aaaaaaaaeiq/-wctpr_ksfm/s400/feedreader_2.jpg&quot;) no-repeat scroll right center rgb(255, 255, 255);" target="popupwindow" method="post"><input value="en_US" name="loc" type="hidden" /><input value="blogcapoenk" name="uri" type="hidden" />

<p style="text-align: left; margin-bottom: 3px;"><b><img style="margin: 0pt 5px 5px 0pt; float: left; cursor: pointer;" alt="Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2UZsUzeOiDyh_v5lanttqtsJDdX5PAC0MlIpaNcOZYv9R5GoRmo-MApBKt6g7QJc1OSWvuQKIl8oAy61C_vFhgHsq3_CpfRqBm9ow7pwweT42ZxlfwsSkQUb01zjwwI_oXCxLGsIXbVuc/s1600/feed-jobindo.png" border="0" height="16" width="16" />Langganan Artikel Terbaru BC via Email </b>

</p><table style="margin-bottom: 3px;" border="0" cellpadding="0" cellspacing="0" width="400"><tbody><tr><td rowspan="2" valign="top" width="75"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSiUquKCfKQwgPgwVO54SaFJ6mGfXPP8pVbB9lqGGSztJQ3Rdcp-5yO_UzFldhwEjgiKBLqnIWNYkxFZfIt3LG4wb0vvJldqHim8-AI6MPOQ353gmE4nm-PeJuR4GifxRFCn57H_oUvQl/s1600/Newspaper-db2.png" height="55" width="70" />

</td><td align="left" height="24" valign="top" width="205"><input onblur="&#39;if" onfocus="&#39;if" style="width: 200px;" class="feedinput" value="Masukkan Email" name="email" size="200" type="text" /></td><td align="left" valign="top" width="119"><input id="imageField" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxdEd4wlsPeFqQmqxTWvQXpSPa7E0-wK59vgxdO8RAFnLMebXtuhmviQw1-lLrNKnkTnE0XY6uGPCPWunECgoMid4egthMTRcZp_2vcsGBBfmN_DH75Kg5XYAKSDfk3kiR03YyXujsqdx/s1600/subscribe-dbjobindo.png" name="I2" type="image" align="left" height="24" width="82" />

</td>

</tr>

<tr>

<td colspan="2" align="right" height="24" valign="top"><div align="left">» Cek Email Anda untuk konfirmasi berlangganan</div></td>

</tr><tr></tr>

</tbody></table></form>

Model 2

Berlangganan artikel RESEP MASAKAN secara gratis, Silahkan masukkan Email

Script Model 2 :

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogcapoenk&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px solid #ccc;padding:3px;text-align:left; background: #ffffff url(&apos;http://i37.photobucket.com/albums/e74/mrphoto16/Hermanblog/logo_RSS.png&apos;) no-repeat right' target='popupwindow'>
<input name='loc' type='hidden' value='en_US'/><input name='uri' type='hidden' value='blogcapoenk'/>

<div class='feedburner-onpost'>
<font color='#000000'>Berlangganan artikel tutorial blog capoenk <br />secara gratis, Silahkan masukkan Email</font>
<table border='0' cellpadding='0' cellspacing='0' style='margin-bottom:3px;' width='232'>
<tr><td width='150'><input class='feedinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' onfocus='if (this.value == &quot;Tulis email bunda disini&quot;) {this.value = &quot;&quot;}' size='20' style='width:150px' type='text' value='Tulis email bunda disini'/></td>
<td align='right' valign='top' width='82'><input align='left' height='24' id='imageField' name='I2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKn69If4HtJR0RCW9SumygGzgPRYEcxJ-j1tulFNYcXlyqP8kQBA1REUsYZdquC6DWxmpz00quOiyNEBcgHUWO1ua7eYVfpWZK3qUuyf6cZPfQ-CAUDeDbF9-x8Fy6_QRPFMLXu-71dU/s200/subscribe-zoom-c.png' type='image' width='82'/></td>
</tr></table><a href='http://feeds.feedburner.com/blogcapoenk' rel='nofollow'><img alt='ResepKulinerInd' height='26' src='http://feeds.feedburner.com/~fc/blogcapoenk?bg=666666&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a>
</div></form>

KETERANGAN :
Warna blogcapoenk : Diganti dengan Nama Feed blog anda
Warna Biru : Text yang bisa di ganti dengan kalimat bebas
Warna Ungu : URL image backsground, bisa di ganti dengan background sesuai selera anda

Tinggal pilih mana model yang sesuai selera, kemudian Copy Paste script diatas ke sidebar dengan pilihan HTML/JAVASCRIPT, letakkan sesuai yang di kehendaki. Selamat mencoba