I have shared many widget tutorials for blogger regarding these sharing gadgets and other things today I am posting another retro styled sharing widget for blogger that contains few social icons that you can use to popularize your website and it even contains the email subscribing widget that will give you a boost in your overall reading fans. Well you can have a look at the widget working below, so if you like it out do check below steps and add it.
 |  |  |  |  |
- Open Blogger > Template > Edit HTML.
- 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/AVvXsEgd80PaBMM60DynNKsHUSNIZlFBWBZCzVYKK8VlIYT67XtZUGaVVMCwte3b8-QlGEfQB_7B-Dj7I7fl-9KOo5HuZ6-WL3XUfdwTYYnwmouOetY9Q1RUT3ZSJqGFuNqfHIrxXZepFbyJbX8/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}
- Now hit Save Template and we have successfully added styles for this widget.
- Now navigate to Blogger > Layout > Add Gadget.
- 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.open('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 (this.value==""){this.value="Enter your email...";}" onfocus="if (this.value=="Enter your email..."){this.value=""}" type="text" value="Enter your email..."/><input alt="" class="ebutton" title="" type="submit" value="Subscribe"/></form></div>
- Now just make sure to change all the xxxxxx in the above code with your following social URL's which ever you need.
- Now after making all the required changes you can hit on Save Option and refresh your blog to see this awesome widget working live.