css3 animated expanded social media widget for blogger

In my previous posts I have shared many social subscription widget for blogger like perfect all in one social media subscription widget, metro style social media widget and social and email subscription widgets.

Now in this post I am going to share with all readers of this blog a beautiful expandable social media subscription widget for blogger. This widget is clean, cool and looks more professional. This widget includes all top social media and email subscription site like Facebook, Twitter, LinkedIn, Google plus, and Google feed burner email subscription service. So everything that you wnt to promote your website on social media websites is present in this widget. Just add/install this widget in your blog and enjoy! Below is a simple process to install this widget in your blog sidebar.

Demo 

How to add this widget in your blog:

Log in to your Blogger dashboard.

Select your template in which you want to add/install this widget.

Go to layout >> Add a Gadget >> select HTML/JavaScript

 Paste the below code and save it. Now save arrangements.

HTML And CSS

<style>#WG-SWS {width: 260px;margin: 5px 20px;padding:5px;}#WG-SWS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#WG-SWS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04XVSCCQwSvc1JCDGqTCEH_4uP-53AzvOS4dahfCdDZJj4y5fC-R0pjUf2IeVLsZ7qn1rbTX7uSMI98k29Ziibieo6YqDuvO8dF-yCipg2FO9yGpqrBwUVkiUlSmXvWA80lI89IbG_M8/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#WG-SWS span:hover {visibility: hidden;}#WG-SWS span {display: block;top: 15px;position: absolute;left: 90px;}#WG-SWS .icon {color: #fafafa;overflow: hidden;}#WG-SWS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#WG-SWS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#WG-SWS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#WG-SWS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#WG-SWS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#WG-SWS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#WG-SWS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#WG-SWS li:hover .icon {width: 250px;}#WG-SWS li:hover .icon {background-color: #d91e76;}#WG-SWS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#WG-SWS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#WG-SWS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#WG-SWS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#WG-SWS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#WG-SWS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#WG-SWS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#WG-SWS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="WG-SWS"><li><a href="http://www.facebook.com/#" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/#" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/#" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://www.pinterest.com/#" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="http://in.linkedin.com/#" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li><li><a href="http://www.youtube.com/user/#" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/#" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul></div><div style='clear: both;'></div>

Customization of this widget!
You just need to replace # with your own social profiles links and you are done…..!
Enjoy! and share this........