Cara Buat Form Berlangganan Email

Form berlangganan Email merupakan salah satu layanan dari sebuah blog yang menurut saya harus disediakan oleh pemilik blog, karena jika suatu blog yang mempunyai konten yang menarik bagi pengunjung maka blog tersebut pasti akan selalu dikunjungi pengunjung tersebut. Untuk memudahkan pengunjung agar selalu mendapatkan update dari tulisan-tulisan anda maka kiata harus menyediakan form berlangganan ini supaya pada waktu anda mempublikasikan tulisan terbaru maka akan otomatis terkirim ke email si pengunjung yang telah mendaftarkan alamat emailnya.

Untuk membuat form berlangganan email terlebih dahulu kita harus mendaftarkan blog ke feedburner. Kalau sudah terdaftar di feedburner, CoPas source code ini kedalam temlplate anda:

Source Code Form Berlangganan Email

<div class="rss_text_widget">
Kirim update terbaru dari<br /><b>"Tutorial Blog Gratis"</b><br />langsung ke Email anda!<p></p><form action="http://feedburner.google.com/fb/a/mailverify" style="text-align: left;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blog-indo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style="width:140px" onfocus="if (this.value == &#39;Email anda disini...&#39;) {this.value = &#39;&#39;;}" value="Email anda disini..." name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Email anda disini...&#39;;}" type="text" /><input value="blog-indo" name="uri" type="hidden" /><input value="" name="loc" type="hidden" /><p><input value="GO" type="submit" /></p></form>
</div>

Tips:
1. Kode Warna Merah = Bisa anda ganti sesuai keinginan.
2. Kode Warna Biru = Ganti dengan Nama feed blog anda.
3. Kode Warna Hijau = Sesuaikan nilai width(lebar) dan height(tinggi) sesuai dengan template anda.

CSS Form Berlangganan Email

Untuk membuat background seperti pada milik blog-indo ini (sidebar kanan) maka tambahkan kode CSS berikut:

.rss_text_widget {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlzfFqWi0064IRDerDrHd0HXTKOOrHmx366pZwJTcAvMEvuIkL3s0YUHs0XNVfkdcH1S2X5R8XG_Wn7DzT44pSubbKlJiiytnYjK-2h_pNpYFOffytAsxmNaIw3NpaLjZbT34BBWmxEX_/s800/feed-big.png) no-repeat top right;
}

Cara Pasang di Blogger / Blogspot

1. Login ke account blogger
2. Pilih tab Rancangan --> Elemen Laman
3. Pilih Tambah Gadget
4. Pada jendela Tambah gadget pilih yang HTML/JavaScript
5. CoPas Source Code Form Berlangganan Email diatas↑.
6. Save / Simpan

Untuk backgroundnya :

1. Pilih tab Rancangan --> Edit HTML
2. Cari kode >]]></b:skin>
3. CoPas CSS Form Berlangganan Email diatas↑ sebelum kode ]]></b:skin>
4. Simpan Template.

Cara Pasang di Wordpress

1. Masuk Ke Dashboard Blog Anda
2. Pilih tab appearance--> Widgets
3. Tambahkan Widget Text ke sidebar
4. Isi dengan Source Code Form Berlangganan Email diatas↑.
5. Tambahkan kode CSS dibawah ini

<style type="text/css">
.rss_text_widget {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlzfFqWi0064IRDerDrHd0HXTKOOrHmx366pZwJTcAvMEvuIkL3s0YUHs0XNVfkdcH1S2X5R8XG_Wn7DzT44pSubbKlJiiytnYjK-2h_pNpYFOffytAsxmNaIw3NpaLjZbT34BBWmxEX_/s800/feed-big.png) no-repeat top right;
}
</style>

Sehingga seluruh kodenya seperti ini :

<div class="rss_text_widget">
Kirim update terbaru dari<br /><b>"Tutorial Blog Gratis"</b><br />langsung ke Email anda!<p></p><form action="http://feedburner.google.com/fb/a/mailverify" style="text-align: left;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blog-indo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style="width:140px" onfocus="if (this.value == &#39;Email anda disini...&#39;) {this.value = &#39;&#39;;}" value="Email anda disini..." name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Email anda disini...&#39;;}" type="text" /><input value="blog-indo" name="uri" type="hidden" /><input value="" name="loc" type="hidden" /><p><input value="GO" type="submit" /></p></form>
</div>

<style type="text/css">
.rss_text_widget {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlzfFqWi0064IRDerDrHd0HXTKOOrHmx366pZwJTcAvMEvuIkL3s0YUHs0XNVfkdcH1S2X5R8XG_Wn7DzT44pSubbKlJiiytnYjK-2h_pNpYFOffytAsxmNaIw3NpaLjZbT34BBWmxEX_/s800/feed-big.png) no-repeat top right;
}
</style>

Seperti itulah langkah-langkah yang harus dilakukan dalam membuat Form berlangganan Email ini. So, tunggu apa lagi, Ayo di praktekan..!!

Dapatkan update terbaru: * Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda