Cara Menciptakan Kotak Berlangganan Mudah Dan Responsive

Kotak Berlangganan yaitu kotak kecil di sidebar blog atau di bawah postingan untuk memudahkan pembaca mendapatkan update goresan pena (posting) blog eksklusif di inbox emailnya.

Jadi, ketika ada goresan pena baru, maka postingan itu akan eksklusif otomatis terkirim via email pembaca. Ini juga manis buat SEO dan popularitas blog.


Kotak berlangganan ini memudahkan pengunjung untuk follow blog kita melalui email, sehingga posting terbaru blog kita akan otomatis dikirimkan Google (Feedburner) ke inbox email. Dari email itulah linknya diklik dan membuka halaman posting terbaru.

Berikut ini arahan dan cara memasang Kotak Berlangganan (Subscribe Form) Simple Responsive di sidebar blog.


Cara Memasang Kode Kotak Berlangganan


1. Layout > Add a Gadget > pilih HTML/Javascript

2. Isi judul, contohnya Form Berlangganan
3. Copas Kode berikut ini.

<style>
#berlangganan{position:relative;border:1px solid #ddd;margin:5px auto}
#berlangganan-form{height:30px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background:#fff;overflow:hidden}
#berlangganan-text{color:#ccc;border-width:0}
#berlangganan input[type=”text”]{width:100%;padding:7px 0 7px 7px;outline:0}
#berlangganan-button{position:absolute;top:0;right:0;height:30px;margin:0;text-align:center;line-height:0;border-width:0;background:whitesmoke;cursor:pointer;font-size:12px;font-weight:bold}
</style>
<div id=’berlangganan’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ id=’berlangganan-form’ method=’get’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=
&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>

  <input name=’uri’ type=’hidden’ value=’‘/>
  <input name=’loc’ type=’hidden’ value=’en_US’/>
  <input id=’berlangganan-text’ name=’email’ onblur=’if (this.value == &quot;&quot;) {this.value = &quot;Enter your email..&quot;;}’ onfocus=’if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}’ type=’text’ value=’Enter your email..’/>
  <button id=’berlangganan-button’ type=’submit’>SUBMIT</button>
</form>
</div>


4. Ganti  dengan arahan Feedburner Blog Anda. Jika belum punya, Daftar ke Feedburner.

5. Save!

Nah itulah Cara memasang Kotak Berlangganan (Subscribe Form) Simple Responsive. Semoga artikel yang aku tulis ini bermanfaat buat anda semua…