Add Email Subscription Box with Social Media Icons to Blogger

I am extremely sorry for not posting here. Due to the burden of final exams, I am finding it difficult to publish posts and hardly get time. Let’s jump straight to today’s post topic. It has really been a long time since we developed a widget. But today I managed to develop one in a short span of time. It is a subscription widget that is carefully designed by keeping the reader’s psyche in mind, providing major focus to an Email subscription. But not only that, but it also includes multi subscribing options for RSS, Google Plus, Twitter and Facebook. This Widget is also made compatible to work with all major browsers including Firefox, Google Chrome, Safari, Opera and especially with the horrible IE!

How To Add this Subscription Form to Blogger?

I have kept the installation steps extremely easy to follow. Just follow these,

  1. Go To Blogger > Layout
  2. Click on Add a Gadget and select an HTML/JavaScript Widget
  3. Paste the code below into the widget,
<style>
.mbtsubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 282px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.mbtsubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.mbtmailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.mbtmailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.mbtsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.mbtsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.mbtsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.hover
{
text-decoration:none;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://
themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) 
format('woff');
}
</style>

<div class="mbtsubscribe">
<div style="color: #666666; font-weight: bold; font: 19px Oswald, 
cursive; margin: 0px 0px 10px 15px;">Get Free And Quality Articles In Your 
Inbox Daily</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform"
method="post" onsubmit="window.open('http://feedburner.google.com/
fb/a/mailverify?uri=mbtbloggingtricks', 'popupwindow', 'scrollbars=yes,width=550,
height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" value="mbtbloggingtricks" type="hidden" />
<input name="loc" value="en_US" type="hidden" />
<input class="mbtmailbox" name="email" onblur="if (this.value == &quot;&quot;)
 {this.value = &quot;Enter Your Email...&quot;;}" onfocus="if
(this.value == &quot;Enter Your Email...&quot;) {this.value = 
&quot;&quot;}" value="Enter Your Email..." type="text" />
<input alt="" class="mbtsubmit" title="" value="Go!" type="submit" />
</form>
</div><div class="hover">
<div style="border: none; color: #666666; font: 19px Oswald, 
cursive; margin: 25px 0 0 5px;">Follow us on:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/pages/mybloggingtricks" 
target="_blank" title="Join us on Facebook" rel="external nofollow" 
class="ext-link"><img src="http://1.bp.blogspot.com/
-7BFnvcwztPI/UDvPdyfwRdI/AAAAAAAALEI/JIvOf_6qVvs/s1600/facebook500.png" 
alt="facebook" /></a>
<a href="https://www.twitter.com/mbloggingtricks" rel="
nofollow external" target="_blank" title="Follow us on Twitter" 
class="ext-link"><img src="http://4.bp.blogspot.com/-
whgSYuUXFK4/UDvPif88foI/AAAAAAAALEk/o1h9AQUEN48/s1600/twitter.png" 
alt="twitter" /></a>
<a href="https://plus.google.com/103854977183845827762" 
rel="nofollow external" target="_blank" title="Follow us 
on Google+" class="ext-link"><img src="http://3.bp.blogspot.com/
-CKC8VpnLV4E/UDvPe3F-JeI/AAAAAAAALEM/CfdjTmmDbHU/s1600/googleplus
-revised.png" alt="gplus" /></a> <a href="http://feedburner.google.com/
fb/a/mailverify?uri=mbtbloggingtricks" rel="nofollow" 
target="_blank" title="Subscribe to RSS"><img src="http:
//3.bp.blogspot.com/-0kc9eDAEfVY/UDvPhDm2DuI/AAAAAAAALEg/
xTrMT70Lutw/s1600/rss.png" alt="rss" /></a>
</div></div>
</div>

4. Save the widget and you are done!

  • To Change the width of the widget, change width: 282px; to any value that you like.
  • To Change the width of the “Enter Your Email…” bar, change width: 160px; to any value that you like.
  • Replace https://plus.google.com/103854977183845827762 with your Google + profile link.
  • Replace http://www.facebook.com/pages/mybloggingtricks with your Facebook page link
  • Replace https://www.twitter.com/mbloggingtricks with your twitter profile link
  • Replace http://feedburner.google.com/fb/a/mailverify?uri=mbtbloggingtricks with your Feedburner RSS Email Link
  • Replace mbtbloggingtricks with your Feedburner RSS Email name for example mbtbloggingtricks is at last of http://feedburner.google.com/fb/a/mailverify?uri=mbtbloggingtricks.

How Did You Like It?

I would be really pleased to hear about your suggestions and feedback about this new widget. If you faced any trouble in installation or customization, then do not panic and just let me know :>
Peace and Blessings 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *