Customized Stylish Email Newsletter Form Gadget For Blogger

Google Blogger Blogspot Free Tips And Tricks

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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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;
}

#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>
<fieldset id=”signupfield”>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 User name]</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></fieldset>

Email Form 3

 

Email Sign-Up Form :3<style type=”text/css”>
/*hotindia.net email form css start*/
.hotindiasignup-form {
background: transparent url(“https://3.bp.blogspot.com/-Q2LmPeJ2nKs/WjF2648kenI/AAAAAAAAAvY/Vtg1I2X_spE9ADKwCLfwIrLZp5bTVRH_ACLcBGAs/s1600/box-christmas-claus-cute-41940.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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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=”[Your 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 Form 4

 

Email Sign-Up Form :4<style type=”text/css”>
/*hotindia.net email form css start*/
.hotindiasignup-form {
background: transparent url(“https://1.bp.blogspot.com/-AqXuNIJ9Fh8/WjF22-AKmhI/AAAAAAAAAvQ/LsUOx_12YhsSx7iumazRHfatu_WKhGnpQCLcBGAs/s1600/dl.maxpixel.freegreatpicture.com.png”) no-repeat scroll center center / 250px 150px;
height: 150px;
width: 250px;
margin: 10px auto 60px auto;
}

.hotindiaform-inner p {
text-align: center;
color: green;
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>
<fieldset style=”background:rgba(250, 2, 2, 0.5)”>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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=”[Your 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>
</fieldset>

Email Sign up Form 5

 

Email Sign-Up Form :5<style type=”text/css”>
.Hotindiasub {
background-color: #1E293B;
width: 100%;
height: 100%;
box-shadow: 0px 0px 10px rgba(30, 41, 59, 0.80);
}

.Hotindiaemailform {
width: 239px;
margin: 10px auto;
}

.Hotindiaform-inner h4 {
color: rgb(255, 255, 255);
text-align: center;
padding: 10px;
font: bold 18px/40px “trebuchet MS”,”Tahoma”;
}

#Hotindiaemailbox {
background-color: #FFF;
border: 1px solid #FFF;
border-radius: 7px 0px 0px 7px;
height: 20px;
padding: 6px;
box-sizing: content-box;
}

#Hotindiaemailbutton {
background-color: #F0553B;
border: 1px solid #F0553B;
color: #FFF;
height: 34px;
border-radius: 0px 7px 7px 0px;
margin-left: -4px;
font-weight: 600;
cursor: pointer;
}

#Hotindiaemailbutton:hover {
background-color: #1E293B;
border: 1px solid #FFF;
box-shadow: 0 0 5px #ddd;
}

.Hotindiasocial-like {
background: transparent url(“https://2.bp.blogspot.com/-JN7F89fBnww/WjlO2MeNCII/AAAAAAAAAxw/Qy7WZR8JPKsry6yY_Ar4L7m9AkfKeldJQCLcBGAs/s1600/hotindia.netfbtwitterrect.png”) no-repeat scroll center center / 250px 157px;
width: 250px;
height: 120px;
margin: 10px auto;
}

.Hotindiafb-likes {
margin-top: 90px;
margin-left: 20px;
position: absolute;
display: block;
box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}

.Hotindiatw-follow {
display: block;
margin-left: 152px;
position: absolute;
margin-top: 89px;
box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
height: 20px;
}
</style>

<div class=”Hotindiasub”>
<div class=’Hotindiasignup-form’>
<div class=’Hotindiaform-inner’>
<h4>Get Posts In Your Inbox</h4>
</div>
<div class=’Hotindiaemailform’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 Here…’/>
<input id=’Hotindiaemailbutton’ title=” type=’submit’ value=’Subscribe’/>
</form>
</div>
</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=”false” 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>
</table>
</div>


Email Sign Up Form 6

Email Sign-Up Form :6<style type=”text/css”>
/*hotindia.netsignupcss start*/
.hotindiasub {
background-color: rgb(87, 98, 105);
width: 100%;
height: 100%;
padding: 5px;
box-shadow: 0px 0px 5px rgb(87, 98, 105);
}

.hotindiaform-inner {
text-align: center;
color: rgb(255, 255, 255);
font: bold 16px “trebuchet MS”,”Tahoma”;
}

.hotindiaemailform {
width: 240px;
margin: 10px auto;
}

#hotindiaemailbox {
background-color: #798187;
color: #FFF;
width: 208px;
border: 1px solid #697780;
padding: 15px;
text-align: center;
height: 18px;
box-sizing: content-box;
}

#hotindiaemailbutton {
background-color: rgb(243, 93, 92);
border: 1px solid rgb(215, 84, 83);
color: rgb(255, 255, 255);
width: 240px;
font: bold 16px “trebuchet MS”,”Tahoma”;
padding: 15px;
text-align: center;
height: 50px;
margin: 10px auto;
cursor: pointer;
}

#hotindiaemailbutton:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}

.hotindiasignup-form {
margin-top: 15px;
}

.hotindiasocial-icons {
overflow: hidden;
text-align: center;
border-bottom: 1px solid rgb(133, 133, 133);
width: 230px;
display: block;
margin: 20px auto;
}

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

.hotindiasocial-icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 2px !important;
}

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

.hotindiasocial-icons ul li a, .hbzsocial-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: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}

.hotindiasocial-icons ul li.social-facebook a {
background-position: -62px 1px;
}

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

.hotundiasocial-icons ul li.social-twitter a {
background-position: -254px 1px;
}

.hotindiasocial-icons ul li.social-twitter a:hover {
background-color: #00aced;
}

.hotindiasocial-icons ul li.social-gplus a {
background-position: -95px 0px;
}

.hotindiasocial-icons ul li.social-gplus a:hover {
background-color: #dd4b39;
}

.hotindiasocial-icons ul li.social-pinterest a {
background-position: -159px 1px;
}

.hotindiasocial-icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}

.hotindiasocial-icons ul li.social-rss a {
background-position: -190px 0px;
}

.hotindiasocial-icons ul li.social-rss a:hover {
background-color: #F87E12;
}

</style>

<div class=”hotindiasub”>

<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>

<div class=’hotindiasignup-form’>
<div class=’hotindiaform-inner’>
<h4>Subscribe to my Newsletter</h4>
</div>
<div class=’hotindiaemailform’>
<form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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=’Your Email’/>
<input id=’hotindiaemailbutton’ title=” type=’submit’ value=’Subscribe’/>
</form>
</div>
</div>
</div>

Set Up Of This Widget:

To use this widget in your blog
1. First copy codes within the adjacent box which style you want to use.

2. Customize this with your own blog URL and social media URLs in place of [Your blog url] [Fb url][Twitter url][Twitter username] etc. Remove the [].

3. Go to your blogger dashboard.

4. Click Add A Gadget.

5. Click HTML/JavaScript Gadget.

6. Place the code inside the box and click save.

You are done pls share if you like .

(adsbygoogle = window.adsbygoogle || []).push({});

Share your love

Leave a Reply

Your email address will not be published.