Here is the cute and simple email subscription box widget for Blogger to interact your visitors. Its very easy to add in your blog or website, Simply follow the instructions to get it !
Step 1
Step 1
- Login to Blogger
- Open Layout in the Left Side Bar
- Click on Add Widget
- Select Html/Javascript
- Now Paste the below code in it and save.
<!--MBW Email Subscription Box funisonline.blogspot.com-->
<style>
.mbw-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX914jNwLMp1GsTtWg3oRcMjAmE7R2mzEDmlgeFq7HmsJD7NPgyGUkRtbdRJ80zNC2uH5wlBHNoqC2t9EU8vTExlZWz8bO38ZXbaxtJd7s9bcDn5MW-5vTx0vjqBnJCom0LxoVNrbyVD4/s1600/subscribe.png) no-repeat 0px 20px;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbw-emailsubmit{
background:#f5bb0d;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
font-size:12px;
font-family:sans-serif;
}
.mbw-emailsubmit:hover{
background:#df8228;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #e3e3e3;
resize:none;
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);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
font-size:13px;
width:170px;
color:#555;}
</style>
<div class="mbw-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=funisonline', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email here" type="text" />
<input type="hidden" value="funisonline" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbw-emailsubmit" value="Submit" type="submit" />
<!--www.funisonline.blogspot.com-->
</form>
</div>
- Replace http://feedburner.google.com/fb/a/mailverfiy?uri=funisonline with your feed burner url (You can get that by visiting your feedburner account then navigating to publicize ( Email Subscriptions )
- Replace funisonline with your feed title. You can get that from end of your feed link http://feedburner.google.com/fb/a/mailverfiy?uri=funisonline
- Change #f5bb0d to change background of submit button.
- Change #df8228 to change background of button on hover effect.
- Change "Subscribe Via Email" to any text you like ( Keep it Short )