Sekarang Bang Jarwo buat widget berlangganan via Email yang sangat responsif, bisa dipakai di sidebar dan footer, tidak mengganggu SEO, dan ringan.
Untuk penampakan widgetnya sendiri bisa dilihat gambar diatas. Sesuai dengan namanya, widget ini responsif, jadi mau ditaruh di header, sidebar, postingan, footer, atau dimanapun itu widget ini akan menyesuaikan ukuran dengan sendirinya.
Oke tanpa basa basi lagi lanjut ke cara pembuatannya.
- Pertama, cari tempat yang ingin anda taruh widgetnya. Biasanya ditaruh di sidebar atau footer.
- Lalu klik tambahkan widget > HTML/Javascript > masukkan kode dibawah ini kedalamnya.
<style>
#berlangganan-jarwo {box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);background-color:#515151;padding:10px 0}
#berlangganan-jarwo p {font-size: 18px;color: #FFF;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;padding-bottom: 5px;display: -webkit-inline-box;}
#berlangganan-jarwo .email-jarwo {padding:0px 20px 10px;}
#berlangganan-jarwo .email-jarwo input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:16px;width:96.5%;border:0;transition:all 0.4s ease-in-out;}
#berlangganan-jarwo .email-jarwo input:focus {background:#fff;outline:none;color:#888;}
#berlangganan-jarwo .email-jarwo .tombol-jarwo {background:#29CE3D;color:#eee;text-transform:uppercase;font-weight:normal;font-size: 20px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#berlangganan-jarwo .email-jarwo .tombol-jarwo:hover{background:#107D1D;color:#eee;}
</style>
<div id='berlangganan-jarwo'>
<center><p>Masukkan Email Anda untuk Tips Lainnya dari Bang Jarwo!</p></center>
<div class='email-jarwo'><center>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=KodeJarwo' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=KodeJarwo, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Alamat Email";}' onfocus='if (this.value == "Alamat Email") {this.value = "";}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='naiyori'/><input name='loc' type='hidden' value='en_US'/>
<input class='tombol-jarwo' type='submit' value='Berlangganan'/>
</form></center></div></div>
- Ganti tulisan KodeJarwo yang ditandai dengan warna biru muda dengan url feed anda.
- Ganti tulisan Masukkan Email Anda untuk Tips Lainnya dari Bang Jarwo! dengan kata-kata yang anda inginkan.
- Simpan, lalu cek blog anda.
Bagaimana? Apakah widget sudah terpasang sempurna di blog anda? Atau ingin widget dengan tampilan lain? Bisa bilang ke saya lewat komentar disini.