Cara Buat Form Berlangganan Email

Kamis, 30 Desember 2010

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(http://lh4.ggpht.com/_ScbmSoturAk/TQNWkkr61gI/AAAAAAAAALE/37jk_rBBVx0/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(http://lh4.ggpht.com/_ScbmSoturAk/TQNWkkr61gI/AAAAAAAAALE/37jk_rBBVx0/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(http://lh4.ggpht.com/_ScbmSoturAk/TQNWkkr61gI/AAAAAAAAALE/37jk_rBBVx0/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

8 komentar:

Obat Penyakit Maag Herbal mengatakan...

ternyata bikin artikel menarik di blog itu ga gampang. . .
semoga apa yang saya dapat di blog ini bisa saya jadikan referensi buat blog saya.
makasih gan.


8 April 2013 11.57
pasang iklan gratis mengatakan...

info yang sangat bermanfaat


16 April 2013 10.49
Pembesar Penis mengatakan...

mantap... keren gan


16 April 2013 10.50
iklan baris online mengatakan...

salam kenal buat adminya., bagus sekali postinganya gan


16 April 2013 10.52
Aborsi mengatakan...

senang bs berkunjung kesini gan, infonya sanat luar bisa .makasih


16 April 2013 10.54
putri mengatakan...

Informasinya sungguh sangat menarik sekali...
Banyak pelajaran yang saya dapatkan...
Makasihnya... Semoga sukses...


23 Agustus 2013 09.06
ami mengatakan...

luar biasa sekali sangatbermanfaat informasinya... terimakasih banyak atas informasinya... semoga suksesnya....


23 Agustus 2013 12.57
Mobile App Developers mengatakan...

I certainly agree to some points that you have discussed on this post. I appreciate that you have shared some reliable tips on this review.


20 Agustus 2015 18.08

Posting Komentar

 

Info

Pengikut

Earn Money ($$$)

© 2010 Tutorial Blog Gratis | Wordpress | Blogger All Rights Reserved Thesis WordPress Theme by Hack Tutors.info