Membuat Kotak Berlangganan Email

Cara membuat kotak berlanganan email yang keren. Tujuanya apa sih membuat kotak berlangganan email, sudah pasti agar para pengunjung yang memang setia pada blog anda dan menunggu nungu postingan dari anda tidak harus membuka website atau blog mereka. Dengan adanya email berlangganan sudah tentu untuk memudahkan sobat ketika si pemilik blog atau web melakukan postingan artikel terbaru. Terus untuk cara membuatnya bagaimana sih agar terlihat elegan dan keren. Berikut screenshoot kotak berlanggananya :

Ok, langsung saja ke tahap pembuatanya, silahkan iktuin instruksi dibawah ini :

1. Masuk ke Blogger - Rancangan - Elemen halaman - Tambah Gadget
2. Pilih HTML/ JavaScript
3. Paste code berikut :

<style>
.mbt-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ni0q5XWHCKxzVsAbIRpES-XlZ8yl0PP-T2EisaediwbMeV6mtvO0IHsWpkaTTKzBosvzA2DuADhke5_kVdNZT6mYPqeM24wf-TtYW1Uw-vS5CCD_1QpEUmQ336-71A6MFRlWxd6wy2BE/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Amadsoleh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="Amadsoleh" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Note : Ganti tulisan Amadsoleh dengan ID feedburner anda.

Berbagi :