Home
blogger

Email Subscription Widget for Blogger Stylish and Simple

how to add a Stylish and Simple Email Subscription Widget for Blogger: with 2 steps, you will get stylish and a simple email subscription widget fo

Email Subscription Widget for Blogger  :

How to add email subscription widget for blogger. Hello my dear freind how are you we are back with another amazing topic add a stylish email subscription widget to blogger, so that your visitor can subcribe you blog and they can get update from your blog at a result they can easily read your next article after bublishing.It will not only oincrease your trafic it will also look your website so trusted. I have showed you how to add facebook widget to blogger in my previous article, by which you can icrease your facebook likes and followers.

 

Amazing Stylish Email Subscription Widget for Blogger

Benefits of Email Subscription widget  on Blogger:

  1. User will get updates from your blog.
  2. It is totally free of coast.
  3. It will increase your website traffic.
  4. It is easy to subscribe.
  5. User can easily unsubscribe when he wants.
  6. Stylish design, which will beautify your website look.
  7. Few lines of JavaScript which will not affect your website loading speed.
  8. No private data collection, Safe and Secure. Because it is from google.
  9. Easy to Customize.
  10. Included Social media widget.

How to add Email Subscription Widget to Blogger:

  • Go to blogger dashboard, click on Layout, then add a gadget, choose HTML and JavaScript gadget.
  • Copy and paste the following code in your content box, save it and enjoy.
  • Add your feed burner URL in following code, Also replace Social media links.

 Style 01:

 
   <style type="text/css">
.hbzsignup-form {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi397TwRcd6d7CQCU1Vpm8ZK9EMMUT098PboAqLp7MVicXBfi2yQF1zLUxrK6KZTY5LO2baPuFp_fO4QNLcWZgonW7qA-WTU327LE58v4jCN3J1ZZHZxlGEKV2OmSV_9wd8v1CmcG12Y-cu/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/AVvXsEiU1ZRSsSyxcwFD4ensstFojch0Sod9AD6ADbvtTB4PZKNuI9C2ndZKVd2sVSY5fU-eoVpJdh6KmQ4MdMJfJHOW2S6v3uql8XCAxh0fekeB3Dt3zR9exRky2dGweK6bPfrKdYwBvjIYun4g/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-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: flex;
    margin: auto;
}
.hbzfb-likes {
display: inline-block;
padding-bottom: 15px;
margin-right: 5px;
}
.hbztw-follow {
display: inline
}
     .post table td{border:none;}.post table tr:nth-child(2n+1) td{background:transparent;}
</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=https://ultimatetechnologycenter.blogspot.com/feeds/posts/default;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='ultimatetechnologycenter'/>
<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/Ultimate-technology-center-112045313688284" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="https://twitter.com/ultimatetechno3" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-pinterest"><a href="https://www.pinterest.com/ultimatetechnologycenter1/" target="_blank" title="pinterest">pinterest</a></li>
<li class="social-rss"><a href="https://ultimatetechnologycenter.blogspot.com/feeds/posts/default" 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/Ultimate-technology-center-112045313688284" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>
</td>
<td class='hbztw-follow'>
<a  style=" font-size: 12px;
    font-weight: 510;
    align-items: center;
    color: #fefefe;
    background: #00aced;
    border-radius: 4px;
    padding: 2px 6px;
" href="https://twitter.com/ultimatetechno3" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true"><svg  style="
    align-items: center;
    fill: #fefefe;
    width: 16px;
    margin: 0px 6px -4px 0px;
    height: 16px;
    " viewbox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
  <path d="M 630, 425
    A 195, 195 0 0 1 331, 600
    A 142, 142 0 0 0 428, 570
    A  70,  70 0 0 1 370, 523
    A  70,  70 0 0 0 401, 521
    A  70,  70 0 0 1 344, 455
    A  70,  70 0 0 0 372, 460
    A  70,  70 0 0 1 354, 370
    A 195, 195 0 0 0 495, 442
    A  67,  67 0 0 1 611, 380
    A 117, 117 0 0 0 654, 363
    A  65,  65 0 0 1 623, 401
    A 117, 117 0 0 0 662, 390
    A  65,  65 0 0 1 630, 425
 Z"
    />
</path></svg><span>Follow</span></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.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 style="text-align: center;">Powered By | <a href="https://ultimatetechnologycenter.blogspot.com"ultimate technology center">ULTIMATE TECHNOLOGY CENTER</a></div>
</div> 
    

Style 02:


/* Widget FollowByEmail */
.FollowByEmail{position:relative;padding:18px 20px 25px;border:1px solid var(--content-border);border-radius:4px;font-size:90%}
.FollowByEmail .title{font-size:14px;margin-bottom:15px;color:#48525c}
.FollowByEmail .follow-text{display:block;margin-bottom:18px}
.FollowByEmail .follow-label{position:absolute;top:0;right:0;display:flex;align-items:center;padding:0 15px;height:54px;cursor:pointer}
.FollowByEmail .follow-label svg.line{height:19px;stroke:var(--link-color)}
.FollowByEmail form, .FollowByEmail > *{position:relative;z-index:1}
.FollowByEmail input[type=submit]{margin-top:13px;width:100%;border-radius:4px}
.darkMode .FollowByEmail .title{background-color:var(--dark-bg);color:var(--dark-text)}
.darkMode .FollowByEmail{border-color:rgba(255,255,255,.1)}


</style>


<div class='FollowByEmail'>
<h3 class='title'>
Follow by Email
</h3>
<div class='follow-inner'>
<label class='follow-text' for='email-input'>
<span>Sign Up for Email Updates</span>
</label>
<form action='https://api.follow.it/subscription-form/aTNwelNzbG1NTEc2SHdBam5scEkyNDVIcVdXa3M2L0tpMU1QU3ZMOWhwZWpuMmNoR1ppRld0bnhRbVIyUHdVZTFtQjdERGk1MU45L3JGam11NUlYckdxZHB4bjZ0NmxhSkZMUnBZU3lmdW5OdjBQSHN0MkR6N08zRzl4MGEzeTF8b09hMmV1R0VEbEFFcVFsNW84MjhFOGc3Q0JqLzBWSXUzTW9nTmRpQU9DST0=/8' method='post' target='_blank'>
<input autocomplete='on' class='follow-address' id='email-input' name='email' placeholder='e.g. youremail@gmail.com' type='email'/>
<input class='follow-submit' id='email-submit' type='submit' value='Subcribe'/>
<label class='follow-label' for='email-submit'>
<svg class='icon line' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path class='svg-c' d='M17.2677 9.06113L13.0023 12.4954C12.1951 13.1283 11.0635 13.1283 10.2563 12.4954L5.95424 9.06113'></path><path d='M6.88787 3.5H16.3158C17.6752 3.51525 18.969 4.08993 19.896 5.0902C20.823 6.09048 21.3022 7.42903 21.222 8.79412V15.322C21.3022 16.6871 20.823 18.0256 19.896 19.0259C18.969 20.0262 17.6752 20.6009 16.3158 20.6161H6.88787C3.96796 20.6161 2 18.2407 2 15.322V8.79412C2 5.87545 3.96796 3.5 6.88787 3.5Z'></path></svg>
</label>
<input name='uri' type='hidden' value=''/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div></div>
Demo

You have to replace subscription URL with Your feed burner link, you should also change the social links.

Web Developer, Electronics engineer, Blogger, UX and UI Designer. I live in Karachi city..........

Post a Comment

PLEASE DO NOT ENTER ANY SPAM LINK IN COMMENTS BOX