Cara Membuat Kotak Berlangganan Responsive di Blog

Kotak berlangganan atau subscription blog adalah fasilitas yang diberikan oleh pihak blogger, dimana bentuk dari kotak berlangganan dapat diatur sesuai dengan keinginan si pemilik blog. Fungsinya adalah untuk membagikan artikel terbaru di blog secara gratis kepada seseorang yang ingin menerima pemberitahuan postingan artikel terbaru didalam sebuah blog. Bagaimana cara untuk berlangganan di sebuah blog? Caranya cukup mudah, yaitu hanya memasukkan alat e-mal kemudian klik subscribe atau ok.  Dengan begitu, orang yang telah memasukan alamat e-mailnya, otomatis akan mendapatkan artikel terbaru dari blog yang di subscribenya. Intinya adalah sama seperti subscribe pada youtube. 

Adanya kotak berlangganan di blog sedikit banyak  dapat meningkatkan visitor. Kok bisa? Coba pahami lagi apa manfaat dari adanya kotak berlangganan blog.

Ada banyak jenis kotak berlangganan atau biasa disebut dengan widget subscription blog, ada yang simple, ada yang ribet, ada yang menggunakan CSS dan lainnya. Sebenarnya pembahasan mengenai ini sudah banyak dibahas oleh blog lain, akan tetapi tidak ada salahnya jika saya coba untuk membahas kembali. Berikut ini akan di berikan sedikit tutorial tentang cara membuat kotak berlangganan responsive di blog.

Cara Memasang Kotak Berlangganan Responsive di Blog

Kotak Berlangganan Responsive di Blog

Caranya cukup mudah, yaitu:

1. Login kedalam blogger.com.
2. Masuk kedalam dashboard.
3. Klik tata letak, kemudian klik tambahkan gadget.
4. Selanjutnya adalah pilih HTML/JavaScript.
5. Masukkan kode berikut ini didalam kolom HTML/Javascript yang dipilih tadi.

<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=FEED-ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input name='uri' type='hidden' value='FEED-ID'/>
  <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>

(Baca juga: Cara membuat formulir kontak responsive di halaman statis blog)

Klik save, kemudian ubah FEED-ID blog anda masing-masing. Karena setiap blog memiliki perbedaan FEED-ID. Untuk demo, silahkan klik button demo dibawah ini:

Demo
Klik untuk melihat