Email subscription widget is a subscription form for blogger sidebar provided by feedburner, this widget help your interested visitors to get latest updates from your blog via e-mail. People just enter their email address and then click on the "Subscribe" button and then, they would get all your blog's updates right on their email's Inbox. These widgets not only increase your traffic but also helps you to grow a loyal community of readers.
Advantages Of Email Subscription Widget
Email Subscription box is also considered as the best ways to promote a website. Subscription widget help you in creating an active community of readers and boost your blog traffic. More traffic = More earning. This widget help you to deliver latest posts to your customers instantaneously via Email, and the best part of this widget is that you will get social media links free in it which are going to help you to connect with your customers via social media channels.
How To Add Email Subscription Widget To Blogger
Step 1 : Go to Blogger>Dashboard>Layout>Add Gadget>Select HTML.
Step 2 : Paste the following code in Window.
<style type="text/css">
.hbzsignup-form {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGmaImTnpvycAC35Sf5pUHkpSsFsEiOsHlzX4ZAYLyLdc6kDubH5DdMyG0GDlbRtUw6eXVSun6-Mv62EculusXDOr_xMA1CAaMBPQm6_egbSMT3A-OJ5OyXRcORXCcdoPSNyXiy1Y6lOE/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
height: 150px;
width: 250px;
margin: 10px auto 60px auto;
}
.hbzform-inner p {
text-align: center;
color: #fff;
padding: 10px;
font: bold 18px "trebuchet MS","Tahoma";
}
.hbzemailform {
margin: 120px auto 5px;
width: 215px;
}
#hbzemailbox {
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;
}
#hbzemailbutton {
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;
}
#hbzemailbutton:hover {
background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}
.hbzsocial-icons {
margin: 20px 0 0;
overflow: hidden;
display: block;
text-align: center;
}
.hbzsocial-icons ul {
display: inline-block;
margin: 0 auto !important;
text-align: center;
padding: 0px
}
.hbzsocial-icons ul li {
background: transparent !important;
border: none !important;
float: left;
list-style-type: none !important;
margin: 0 4px 10px !important;
padding: 0 !important;
}
.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
display: none !important;
}
.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphOheGRMuYyqVjVWFT4PB5RJd7Bm7NwLVVFERc9mpmBFFSTan2VeRXJ3e6mewT2m8kDUgCnbqUR__17fhchpJ3ce4BAaEVztnFwjjm9DJiu6Lib2F9OKSJ3po7kHUEJd8szQlCPLa1PxX/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;
}
.hbzsocial-icons ul li.social-facebook a {
background-color: #3b5998;
background-position: -60px 3px;
}
.hbzsocial-icons ul li.social-twitter a {
background-color: #00aced;
background-position: -253px 3px;
}
.hbzsocial-icons ul li.social-gplus a {
background-color: #dd4b39;
background-position: -93px 3px;
}
.hbzsocial-icons ul li.social-pinterest a {
background-color: #cb2027;
background-position: -157px 3px;
}
.hbzsocial-icons ul li.social-rss a {
background-color: #F87E12;
background-position: -189px 3px;
}
.hbzsocial-icons ul li a:hover {
background-color: #333;
}
.hbzsocial-like {
display: block;
text-align: center;
}
.hbzsocial-like tbody, .hbzsocial-like tbody tr {
display: block;
}
.hbzfb-likes {
display: inline-block;
padding-bottom: 15px;
margin-right: 5px;
}
.hbztw-follow {
display: inline
}
</style>
<div>
<div class='hbzsignup-form'>
<div class='hbzform-inner'>
<p>Sign Up for Email Updates</p>
</div>
<div class='hbzemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/blogfowl9', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogfowl9'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
<input id='hbzemailbutton' title='' type='submit' value='Sign up'/>
</form>
</div>
</div>
<br />
<div class="hbzsocial-icons">
<ul>
<li class="social-facebook"><a href="https://web.facebook.com/Blog-Fowl-359381487834648/" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="http://twitter.com/awaissikandar1" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="https://plus.google.com/111818492561788636734" target="_blank" title="Google+">Google+</a></li>
<li class="social-rss"><a href="http://feeds.feedburner.com/blogfowl9" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>
<table class='hbzsocial-like'>
<tbody>
<tr>
<td class='hbzfb-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="https://web.facebook.com/Blog-Fowl-359381487834648" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>
</td>
<td class='hbztw-follow'>
<a href="http://twitter.com/awaissikandar1" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @awaissikandar1</a>
<div>Powered By<a href="http://blogfowl.blogspot.com/ title="blog fowl">Blog Fowl</a></div>
<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.defer="defer"src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</td>
</tr>
<tbody>
</tbody></tbody></table>
</div>
Step 3 : Change the higlighted lines with your own.And You Are Done.
If any problem presists feel free to comment.
Tagged With
- Email Subscription Widget For Blogger
- stylish email subscription widget for blogger
- feedburner email subscription widget for blogger
- email widget for blogger
- email subscription widget for blogger
- stylish email subscription widget for blogger
- email subscription widget html
- email subscription widget for website
- blog email subscription widget
- best email subscription widget
- free email subscription widget for website