Beautiful Sidebar Email Subscription Widget for Blogger

Blogger email subscription widget
Email subscription form delivers your latest posts to your subscribed reader's email inboxes in the form of notifications along with post title, image and post body. Therefore, it's the most important widget in blogger platform that increases your blog page viewers and you get ranked in top 10 google search results. This email subscription widget is quite responsive. With this widget, you can easily attract your blog visitors to get subscribe to your blog posts. There are many widgets available on the internet but believe me, this one is the best ever.

Read Also: 1. CSS3 Email Subscribe Widget for Blogger 2. Add Stunning Email Subscription Widget to Blogger 3. Feedburner Email Subscription Form for Blogger

Adding Email Subscription Widget in Blogger

  • Login to your blogger account
  • Navigate to Template > Edit HTML
  • Click anywhere inside the template editor
  • Press Ctrl + F and search for ]]></b:skin>
  • Add the following code right before the ]]></b:skin>
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background-color:#171717;color:#FFF}
  • Click Save Template
  • After saving your template press Back button and navigate to Layout
  • Click Add a Gadget  > HTML/JavaScriptAdd
  • A popup will open and paste the following code in the content area
  • Leave title blank by adding the HTML comment command <!--> (ScreenShot)
Blogger email subscription widget
Copy the entire code here
<style type='text/css'>
.FollowByEmail td{width:100%;float:left}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{margin-left: 0;
border-radius: 0;
height: 45px;
border: none;
color: #000;
font-size: 18px;
letter-spacing: 0px;
outline: none;
font-family: "Exo", Helvetica, Arial, sans-serif;
text-align: center;
padding: 10px 10px;
width: 100%;
text-transform: uppercase;
cursor: pointer;
font-weight: 800;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-appearance: none;background-color:#fed130;}
.follow-by-email-inner:after {
content: " Widget by Knigulper";
display: block;
margin-top: 10px;
color: #fff;
font-size: 6px;
text-align: right;
line-height: 1.2;
font-weight: 700;
font-family: "Exo", Helvetica, Arial, sans-serif;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background-color:#171717;color:#FFF}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{    height: 45px;
box-sizing: border-box;
border: none;
background: #292929;
padding: 14px 10px;
color: #777;
font-size: 14px;
text-align: center;
outline: none;
width: 100%;
font-family: "Exo", Helvetica, Arial, sans-serif;
font-weight: 700;
margin-bottom: 10px;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address:focus{border:1px solid #EEE}
.FollowByEmail .widget-content{background: #000;
padding: 30px;
color: #fff;}
.FollowByEmail .widget-content:before{content:"GET MORE STUFF";    display: block;
color: #fff;
text-transform: uppercase;
font-size: 16px;
letter-spacing: -1px;
font-weight: 700;
text-align: center;
line-height: 1;}
.follow-by-email-inner:before {
content: "Get Latest Updates";
color: #fed130;
text-transform: none;
font-size: 32px;
letter-spacing: -1px;
font-weight: 800;
text-align: center;
display: block;
margin-bottom: 20px;
}
.sect-left .FollowByEmail .follow-by-email-inner .follow-by-email-address{border:1px solid #333;background-color:#222;color:#ddd}
.sect-left .FollowByEmail .widget-content{background-color:#222}
.sect-left .FollowByEmail .widget-content:before{color:#ddd}
.sect-left .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background-color:#333}
.FollowByEmail .widget-content:before{display:none}
</style>
<div class="widget FollowByEmail" data-version="1" id="FollowByEmail1">
<div class="widget-content">
<div class="follow-by-email-inner">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=Knigulper&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<table width="100%">
<tbody><tr>
<td>
<input class="follow-by-email-address" name="email" placeholder="Email address..." type="text" />
</td>
<td width="64px">
<input class="follow-by-email-submit" type="submit" value="Submit" />
</td>
</tr>
</tbody></table>
<input name="uri" type="hidden" value="Knigulper" />
<input name="loc" type="hidden" value="en_US" />
</form>
</div>
</div></div>
  • Click Save.
Note: Before you hit the save button, replace the blue text Knigulper with your FeedBurner username.
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind