Customized Stylish Email Newsletter Form Gadget For Blogger

Serving email newsletter to your users is a great tool to increase your traffic and improve your SEO. Isn’t it? But Default signup widget available in blogger looks outdated. Even with free custom themes this gadget looks outdated. But if you present a goodlooking signup form then it have the power to attract users and let them put their email into the box. You can find out many sites provides pop-up subscription forms which are none the less good but can increase pageloading time considerably, also pop-up pages are hated by most users. So these are for you, only copy these codes paste in the right place and you are done.

Sign Up Form:1

Email Sign-Up Form :1<style type=”text/css”>
/*hotindia.net email form css start*/
.hotindiasignup-form {
background: transparent url(“https://1.bp.blogspot.com/-vU5U9pzYSwo/WjFep-V5aiI/AAAAAAAAAuw/kybk3ZZo6ws1PpSRGmIbL8IrUV3Yoip5ACLcBGAs/s1600/email-marketing-2942593_1920.jpg”) no-repeat scroll center center / 250px 150px;
height: 150px;
width: 250px;
margin: 10px auto 60px auto;
}

.hotindiaform-inner p {
text-align: center;
color: #000;
padding: 10px;
font: bold 18px “trebuchet MS”,”Tahoma”;
}

.hotindiaemailform {
margin: 120px auto 5px;
width: 215px;
}

#hotindiaemailbox {
background: #FEFEFE none repeat scroll 0% 0%;
border: medium none;
font: 12px/12px “HelveticaNeue”,Helvetica,Arial,sans-serif;
margin-right: 5px;
box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
padding: 7px;
box-sizing: content-box;
height: 12px;
vertical-align: top;
display: inline-block;
}
#hotindiaemailbutton {
background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
border: medium none;
color: #FFF;
cursor: pointer;
font: 13px/13px “HelveticaNeue”,Helvetica,Arial,sans-serif;
padding: 6px;
border-radius: 5px;
height: 27px;
display: inline-block;
}

#hotindiaemailbutton:hover {
background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}

.hotindiasocial-icons {
margin: 20px 0 0;
overflow: hidden;
display: block;
text-align: center;
}

.hotindiasocial-icons ul {
display: inline-block;
margin: 0 auto !important;
text-align: center;
padding: 0px
}

.hotindiasocial-icons ul li {
background: transparent !important;
border: none !important;
float: left;
list-style-type: none !important;
margin: 0 4px 10px !important;
padding: 0 !important;
}

.hotindiasocial-icons ul li::before,
.hotindiasocial-icons ul li::after {
display: none !important;
}

.hotindiasocial-icons ul li a, .hotindiasocial-icons ul li a:hover {
background: url(“https://4.bp.blogspot.com/–lR1zhPP13g/WjFeqgTEttI/AAAAAAAAAu0/IOjeHVUMQG8uYGIBEoWsmNKqdfEcWoOMACLcBGAs/s1600/sprite_32x32.png”) no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 38px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s; width: 38px;
}

.hotindiasocial-icons ul li.social-facebook a {
background-color: #3b5998;
background-position: -60px 3px;
}

.hotindiasocial-icons ul li.social-twitter a {
background-color: #00aced;
background-position: -253px 3px;
}

.hotindiasocial-icons ul li.social-gplus a {
background-color: #dd4b39;
background-position: -93px 3px;
}

.hotindiasocial-icons ul li.social-pinterest a {
background-color: #cb2027;
background-position: -157px 3px;
}

.hotindiasocial-icons ul li.social-rss a {
background-color: #F87E12;
background-position: -189px 3px;
}
.hotindiasocial-icons ul li a:hover {
background-color: #333;
}

.hotindiasocial-like {
display: block;
text-align: center;
}

.hotindiasocial-like tbody, .hotindiasocial-like tbody tr {
display: block;
}

.hotindiafb-likes {
display: inline-block;
padding-bottom: 15px;
margin-right: 5px;
}

.hotindiatw-follow {
display: inline
}
/*hotindia.net email css end*/
</style>

<div>
<div class=’hotindiasignup-form’>
<div class=’hotindiaform-inner’>
<p>Sign Up for Email Updates</p>
</div>
<div class=’hotindiaemailform’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true’ target=’popupwindow’>
<input name=’uri’ type=’hidden’ value='[Your Blog uri]’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
<input id=’hotindiaemailbox’ name=’email’ required=” type=’text’ placeholder=’Enter your email…’/>
<input id=’hotindiaemailbutton’ title=” type=’submit’ value=’Sign up’/>
</form>
</div>
</div>

<div class=”hotindiasocial-icons”>
<ul>
<li class=”social-facebook”><a href=”[Fb url]” target=”_blank” title=”Facebook”>Facebook</a></li>
<li class=”social-twitter”><a href=”[Twitter url]” target=”_blank” title=”Twitter”>Twitter</a></li>
<li class=”social-gplus”><a href=”[Google+ url]” target=”_blank” title=”Google+”>Google+</a></li>
<li class=”social-pinterest”><a href=”[Pinterest url]” target=”_blank” title=”Pinterest”>Pinterest</a></li>
<li class=”social-rss”><a href=”[RSS url]” target=”_blank” title=”RSS”>RSS</a></li>
</ul>
</div>

<table class=’hotindiasocial-like’>
<tbody>
<tr>
<td class=’hotindiafb-likes’>
<div id=”fb-root”>
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>
<div class=”fb-like” data-href=”[Fb url]” data-layout=”button_count” data-action=”like” data-show-faces=”false” data-share=”false”>
</div>
</td>
<td class=’hotindiatw-follow’>
<a href=”[Twitter Url]” class=”twitter-follow-button” data-show-count=”true” data-show-screen-name=”false” data-dnt=”true”>Follow @[Twitter Username]</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);
</script>
</td>
</tr>
<tbody>
</tbody></tbody></table>
</div>

Email Sign Up Form :2

Email Sign-Up Form :2<style type=”text/css”>
/*hotindia.net email form css start*/
.hotindiasignup-form {
background: transparent url(“https://1.bp.blogspot.com/-AArF3ifam3w/WjF3YyT8EDI/AAAAAAAAAvg/ANL5buAstX8JSHdpHmvFtNOsEPSQjMVxACLcBGAs/s1600/MaxPixel.freegreatpicture.com-Lap-Closure-Send-Mail-Chest-Box-Go-Away-Luggage-1649299.jpg”) no-repeat scroll center center / 250px 150px;
height: 150px;
width: 250px;
margin: 10px auto 60px auto;
}

.hotindiaform-inner p {
text-align: center;
color: #fff;
padding: 10px;
font: bold 18px “trebuchet MS”,”Tahoma”;
}

.hotindiaemailform {
margin: 120px auto 5px;
width: 215px;
}
#signupfield{border-color:maroon;border-width:2px;border-radius:5%;}
#hotindiaemailbox {
background: #FEFEFE none repeat scroll 0% 0%;
border: medium none;
font: 12px/12px “HelveticaNeue”,Helvetica,Arial,sans-serif;
margin-right: 5px;
box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
padding: 7px;
box-sizing: content-box;
height: 12px;
vertical-align: top;
display: inline-block;
}
#hotindiaemailbutton {
background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
border: medium none;
color: #FFF;
cursor: pointer;
font: 13px/13px “HelveticaNeue”,Helvetica,Arial,sans-serif;
padding: 6px;
border-radius: 5px;
height: 27px;
display: inline-block;
}