Membuat Widget Email Subscribe Keren di Blog

Membuat Widget Email Subscribe Keren di Blog
Apa yang terlintas di benak anda jika mendengar kata Email Subscribe? tentu sebagai blogger anda akan berfikir Email Subscribe adalah layanan newsletter gratis, yaitu layanan yang menyediakan fitur berlangganan artikel secara otomatis yang nantinya akan dikirimkan ke email-email pengunjung yang telah mendaftar. Pasalnya, di era blogsphere yang semakin kompleks seperti ini, kita sebagai blogger diharuskan untuk cermat dan pintar dalam melihat peluang dan menggali potensi yang besar di dalamnya, agar kita dapat mengoptimalkan dan mendulang traffik kunjungan yang besar ke blog kita.

Seperti pada postingan yang sebelumnya (membuat share button melayang/popup di sisi blog), kita telah menelaah dan mengetahui bersama-sama bahwasanya kini blog tidak hanya mendapatkan traffik utama dari search engine semata, namun juga dari sumber-sumber potensial lainya, seperti social media (jejaring sosial) dan newsletter (langganan artikel otomatis) yang perlu kita perhatikan dan maksimalkan.

Email subscribe tidak hanya berfungsi sebagai langganan artikel saja, namun juga berguna untuk menjadi 'reminder' atau pengingat tatkala seseorang pengunjung lupa untuk mengunjungi blog kita secara rutin seperti yang biasa Ia lakukan. Memang tidak mudah untuk mendapatkan banyak pelanggan yang ingin berlangganan artikel blog kita, tapi ada baiknya kita "berusaha" dahulu, yang penting kita harus bersikap user friendly dan menyuguhkan konten-konten yang menarik serta informatif bagi pengunjung, agar pada akhirnya mereka bersedia untuk berlangganan artikel dan menjadi pengunjung loyal blog kita.

Cara Membuat Widget Email Subscribe Keren

1. Login ke Blogger.

2. Pilih Tata Letak / Layout.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode dibawah ini kedalamnya.

<style>
.form {
border:1px solid #aaa; /* warna garis pinggir form */
background: #f0f0f0 /* warna background form */
padding:3px; /* spasi form */
width:300px; /* panjang form */
height:120px /* tinggi form */
}
.rss {
background:#f4f4f4;
}
.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/farhanshare"><img src="http://lh3.ggpht.com/_15FopxVONSo/TCXI_jBHdlI/AAAAAAAADPY/Rh5cFsxiV4A/s800/005.png" /></a> <a href="http://feeds.feedburner.com/farhanshare">GET UPDATE VIA EMAIL</a></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=farhanshare', '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="FarhanShare" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>
</div></div> 

Keterangan:
  • 1px = ketebalan border widget
  • #aaa = warna border widget
  • #f0f0f0 = background widget
  • 300px = lebar widget
  • 120px = tinggi widget

6. Klik "Save/Simpan" gadget, dan selesai.

Demikian informasi terbaru tentang Membuat Widget Email Subscribe Keren di Blog, baca juga artikel menarik lainya seputar tutorial blog tentang Cara Membuat Contact Form (Kontak Formulir) di Blog, semoga bermanfaat, dan selamat mencoba. Good Luck!

Postingan terkait: