Add Retro Style Social Sharing Widget with Subscribe Blogger

I have shared several widget tutorials for blogger relating to these sharing gadgets and alternative things nowadays i'm posting another retro styled sharing widget for blogger that contains few social icons that you just will use to popularize your web site and it even contains the e-mail subscribing widget which will offer you a lift in your overall reading fans. Well you'll be able to have a glance at the widget operating below, therefore if you wish it out do check below steps and add it.

Demo

1. Open Blogger > Template > Edit HTML.
2. Now press Ctrl+F and search for ]]></b:skin> tag & add below code above it.

#socialbox{box-shadow: 0 5px 5px -5px #999;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border-radius:4px;border:1px solid #aaa;padding:5px;text-align:center;width:300px}img.beintouch:hover{background:none repeat scroll 0 0 #ffbc99;border-radius:10px;box-shadow:0 0 10px #ffbc12}.emailtext{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLJdiWTRFTnEmWiHhjuctJ-P6I41xr0P9j3JDGTtpYpiNX9ACgNZptsBDvQ9cAVSwmKwG9XhjXh5CQgdKXCp6-UBXpYjISSrfNCw42Z_bEuNMTe1N4UGFNasAE2d77HPkpbMkD1hB5N4/s1600/mailbox.png) no-repeat scroll 4px center;border:1px solid #7E4E27;border-radius:4px 4px 4px 4px;box-shadow:1px 1px 4px #7E4E27 inset;color:#444;font-weight:700;padding:7px 15px 7px 35px;width:180px}.ebutton{background:#D55959;border:1px solid #D3D3D3;border-radius:4px 4px 4px 4px;color:#FFF;cursor:pointer;font-weight:700;margin-left:-18px;margin-top:5px;padding:6px 15px;text-decoration:none;text-shadow:1px 1px 0 #000}rn

3. Now hit Save Template and we have successfully added styles for this widget.
4. Now navigate to Blogger > Layout > Add Gadget.
5. Now choose HTML/JavaScript gadget and add below code into it.

<div id="socialbox"><center><table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody><tr><td><a href="http://facebook.com/xxxxxx" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/xbHHy64.png"/></a></td><td><a href="http://twitter.com/xxxxxx" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/CH75kL3.png"/></a></td><td><a href="http://pinterest.com/xxxxxx" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/umdZC07.png"/></a></td><td><a href="https://plus.google.com/xxxxxx" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/BD3OXI1.png"/></a></td><td><a href="http://feeds.feedburner.com/xxxxxx" rel="nofollow" target="_blank"><img class="beintouch" src="http://i.imgur.com/cjWAl2Z.png"/></a></td></tr></tbody></table></center><div></div><form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=xxxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow"><input name="uri" type="hidden" value="xxxxxx"/><input name="loc" type="hidden" value="en_US"/><input class="emailtext" name="email" onblur="if undefinedthis.value==""){this.value="Enter your email...";}" onfocus="if undefinedthis.value=="Enter your email..."){this.value=""}" type="text" value="Enter your email..."/><input alt="" class="ebutton" title="" type="submit" value="Subscribe"/></form></div>

6. Now just make sure to change all the xxxxxx in the above code with your following social URL's which ever you need.
7. Now after making all the required changes you can hit on Save Option and refresh your blog to see this awesome widget working live.