Beautiful Email Subscription Widget with Social Buttons For Blogger

How to add this widget to your blog ?

1. Goto your blogger account > open  your blog > Layout > Add a Gadget > HTML/Javascript.

Customize:

1. Replace "YOURFEEDID" with your feedburner feed ID.

2. Replace Social Pages user names with your social profile or pages usernames.

(Facebook-Page-Usename, Twitter-Username, Google-plus-Username, Youtube-Username, Pinterest-Username, RSS Feed URL)

3. You can also change the width of this widget by changing width: 235px;

4. If you want to change the background colour, you need to inform us via comment.

Replace all highlighted colour codes given below, except width.

CODE:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login"> <h1>Get Free Email Updates</h1> <input type="hidden" value="YOURFEEDID" name="uri" /> <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus /> <input type="hidden" name="loc" value="en_US" /> <input type="submit" value="Subscribe" class="login-submit" /> <!-- AddThis Follow BEGIN --><div class="addthis_toolbox addthis_32x32_style addthis_default_style"><a class="addthis_button_facebook_follow" addthis:userid="Facebook-Page-Username"></a><a class="addthis_button_twitter_follow" addthis:userid="Twitter-Username"></a><a class="addthis_button_google_follow" addthis:userid="Google-Plus-Username"></a><a class="addthis_button_youtube_follow" addthis:userid="Youtube-Username"></a><a class="addthis_button_pinterest_follow" addthis:userid="Pinterest-Username"></a><a class="addthis_button_rss_follow" addthis:userid="Rss-Feed-URL"></a></div><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511a0f4b70a3d453"></script><!-- AddThis Follow END --> <p class="login-help"><a href="http://www.knowledge333.blogspot.com?src=fbform" rel="nofollow">Powered By: Knowledge333</a></p></form>
<style>::-moz-focus-inner {  padding: 0;  border: 0;}
:-moz-placeholder {  color: #bcc0c8 !important;}
::-webkit-input-placeholder {  color: #bcc0c8;}
:-ms-input-placeholder {  color: #bcc0c8 !important;}
.input {  font: 12px/20px "Lucida Grande", Verdana, sans-serif;  color: #404040;  background: #ebc9a2;}
.input {  font-family: inherit;  font-size: 12px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
.login {  padding: 18px 20px;  width: 235px;  background: #3f65b7;  background-clip: padding-box;  border: 1px solid #172b4e;  border-bottom-color: #142647;  border-radius: 5px;  background-image: -webkit-radial-gradient(cover, #993399, #993399);  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);  background-image: radial-gradient(cover, #437dd6, #3960a6);  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);}.login > h1 {  margin-bottom: 20px;  font-size: 16px;  font-weight: bold;  color: white;  text-align: center;  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);}
.login-input {  display: block;  width: 90%;  height: 37px;  margin-bottom: 20px;  padding: 0 9px;  color: white;  text-shadow: 0 1px black;  background: #2b3e5d;  border: 1px solid #15243b;  border-top-color: #0d1827;  border-radius: 4px;  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);}.login-input:focus {  outline: 0;  background-color: #32486d;  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);}.lt-ie9 .login-input {  line-height: 35px;}
.login-submit {  display: block;  width: 100%;  height: 37px;  margin-bottom: 15px;  font-size: 14px;  font-weight: bold;  color: #294779;  text-align: center;  text-shadow: 0 1px rgba(255, 255, 255, 0.3);  background: #adcbfa;  background-clip: padding-box;  border: 1px solid #284473;  border-bottom-color: #223b66;  border-radius: 4px;  cursor: pointer;  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);}.login-submit:active {  background: #a4c2f3;  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);}
.login-help {  text-align: center;}.login-help > a {  font-size: 11px;  color: #d4deef;  text-decoration: none;  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);}.login-help > a:hover {  text-decoration: underline;}</style>