Email Subscription with Social Media Widget for Blogger

If you like blue color, this widget will suit you, which content in a blue box with Facebook, Twitter, Google plus, RSS sharing button and awesome email subscription box. I think thah this widget is best for those blogs, whose blog’s theme's basic color is blue or black.

• LIVE DEMO

1. Log into your blogger account

2. Design —> Edit HTML 

3. Place the following code into the HTML / JavaScript box in the sidebar

<style> a.social-icons {margin-right: 5px; height:40px;width:40px;} a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); } #ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9; background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEC0ZhM0Ftv1swHCqeHXQyEdnbeqfA2n9Ue43gIDRuIkaQsXenpN7nltBq1ASiqlwPpbCQMAPkEwIorlyQchx_38hNj1LbjfM-gwLU3e2zN1aTzFtqH_nQsMVs7ZZydseFUF8__IvyXXa1/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJo3uHfQRw_xmgVeQvBzGGt2j94ANBpGszkhKvSRa-2-mp5TcE1rv0vSPqSTg2qJG9vSnc4YTWx7r42zRjQ2k3PVhVGk__57xiJOQp6j2JHWX8B_lvToDA4L5DGoC9JTeb8GD-l7Trm4We/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz6E4_BA685M4EYbcHmLaNShnYfE3cCG55pKSP6sn9LMaFVQlvdqbKpF1IKXjfuvDKqdxkRn_eV8LuVh2l2kEhh6LU9mEafZh8IXZ04_rFclNNNY8e6af5JVcrI4kb-GxdbzlCDQ3bfZkM/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style> <br /> <div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px;"> <h3 id="bloggertrix1-title-text" style="color: white; font-size: 20px;"> GET FREE EMAIL UPDATES</h3> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <a class="social-icons" href="https://facebook.com/YOUR FACEBOOK USER NAME"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWgrkYgJlkjo-y-nTXfdUeHZY8UDc1NllxU4VtItPuFc8_fez-cT53Fl7Waqc9R8kyQcx-h3emhSmmdTYNXxLc5ifg9q6F4n4e4TUUq3MSBYmq0PTg6mYVoSKePNQKzuQtWpNkpWBTFGr/s1600/Bloggertrix-facebook.png" /></a> <a class="social-icons" href="https://twitter.com/YOUR Twitter USER NAME"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSzTh5MKvzzXMTfQPm2LyNfnUPMvda3IQRLZz6LuvDy8BRtAQoZnrEGt3igSZMz4DdZ8MulCStyfxsFQgoFNrwxpTHYNBCZBd44ZNmnFZj3tO2XJtIhDcB1G9WlCaTszWlxB4wrtidR2X/s1600/bloggertrix-twitter.png" /></a> <a class="social-icons" href="https://plus.google.com/YOUR GOOGLE PLUS ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2R1ETkBMF8RGpjG78x8qiDKgnL2lcrCXHU1lHDh_iuWa-H2YjOparPmEVN2ObG6ln9mlgUKDAUhmVudCb0b6O5pzXepyQ9D-BCQ5QxsvM83DdgEBgOMa2TxfcO7iA-ad9YGqDLROc6f1E/s1600/Bloggertrix-Googleplus.png" /></a> <a class="social-icons" href="http://www.feedburner.com/ YOUR FEEDBUNNER ID "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiyKNYQbB4EwjTeo8i3-SwkrNiLdC5EW8lKvGy369lTXYJahh_L91ZLAtwS4ZKWehUNtr61nRPFInF-86yMfui-agfFh9EA2DPqakiAGy0Gp3ujArdUIpaSrVwv8cH-BK3FyoBGJ109W4T/s1600/Bloggertrix-Rss.png" /></a> <input class="email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="YOUR FEEDBURNER ID " /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form> </div> </center>