A Cute Email Subscription Box for Blogspot User!

When we develop any template we take some particular custom gadgets and also make them compatible with our developed template so that it can express extra beauty of our developed template and allure a user to download and use the hot design right that time. Let's go ahead and see how to install it on blogger platform

Live Demo

How To Install The Widget?

1. Go to Blogger > Layout
2. Now click on Add A Gadget link
3. Choose HTML/JavaScript
4. Now copy and paste the following code inside
5. Do some changes and finally hit save button

<style>
.emailzon p {
color:#CCC;
font-size: 20px;
font-weight: normal;
font-family: Lucida Fax, Tahoma;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #444;
width:100%;
margin-bottom:0px;
margin-top:-10px;
}
#wrapperzon {
border:1px solid #333; padding:8px;
width:300px;
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih_BqMxO-MWv3FF4QseYpj0cmWoevfBCKqWI_eAmax76QRi7OBvzZpQEQk4gpt0Kx4hMfufm5ZrRHuH8e5dCAlYUHxgJkuRWGynrcTnGfuVSpi3LO9BgWGgwhWlSpbmHGnkhU1dPSl_4eH/s1600/picons20.png)no-repeat left top;
height:60px;
margin:0;
background-size:63px auto;
}
input.subscribe{
background: -moz-linear-gradient(center top,#666 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
width: 80px;
margin-top:6px;
height:29px;
padding-top:5px;
border-image: initial;}

input.subscribe:hover{
background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
.email-box{
padding: 5px 5px;
font-family: "Arial","Helvetica",sans-serif;
height:38px;}
input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
input.email:focus{color:#333}
.upper {
margin-top:-13px;
padding:0;
}
</style>

<div id='wrapperzon'>

<div class='upper'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=microwbt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=420&apos;);return true' style='text-align: center;' target='popupwindow'>
<p><input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Email...&quot;;}' onfocus='if (this.value == &quot;Enter Email...&quot;) {this.value = &quot;&quot;;}' style='width: 180px; margin-left:-5px; height: 29px; background:#FFFFFF; border: 1px solid #222; color: #666; padding: 0px 8px 0px 6px;-moz-border-radius: 3px; -webkit-border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;border-image: initial; font-weight: italic; font-size: 12px;font-family: &quot;Arial&quot;,&quot;Helvetica&quot;,sans-serif;' type='text' value='Enter Email...'/><input name='uri' type='hidden' value='microwbt'/><input name='loc' type='hidden' value='en_US'/>
<input class='subscribe' type='submit' value='Submit'/></p><p>
<a href='http://feedburner.google.com' target='_blank'/></a></p></form>
<div>

</div></div></div>

Customize The Following

1. Simply change microwbt with your feedburner username
2. If you change the popup box height and width then simply change the following measurementwidth=500, height=420

Socializer Widget By Dashing Blogger

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →