Vertical Hover List ‘Social Network Sites’ Widget for Blogger/Wordpress

On our blog we’ve provided lots of Widgets script/html codes and Widget code generating tools to add directly to blogger or websites. Now we bring a special designed hover type widget where all the social network sites icons are arranged like Facebook, Twitter, Google Plus, Pinterest, LindedIn, YouTube, RSS with colorful hover effect. This widget developed with expandable hover effect colors related to social network sites. Website or blog owners can easily can customize the code given below and add to their blogs without any hardwork. Let’s begin tutorial for adding social networking sites expandable icon widget for blogger.

Social Network Expandable Widget for Blogger
Sign into your blogger account
Select ‘Layout’ link tab
Click on ‘Add a Gadget’ link tab and select ‘HTML/Javascript’ widget
Now copy the below code and paste in it

<style>#BT-SWS {width: 260px;margin: 5px 20px;padding:5px;}#BT-SWS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT-SWS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUy-a8dYu6RZtYYahNGHsuDZNSbj6FT_kwZe6GyT98N13DHOeeE7ji2Y23tQUNI-w3kHnAJBEJgsyh3wMT19hRdJkDx7_ZcsZqFQMCKKmnfKcAJv6S1rvTviY93O6fI7X7oi1xCxQOEk/s960/BlogTariff.com-Social_Button-facebook-twitter-youtube-rss.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;}#BT-SWS span:hover {visibility: hidden;}#BT-SWS span {display: block;top: 15px;position: absolute;left: 90px;}#BT-SWS .icon {color: #fafafa;overflow: hidden;}#BT-SWS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#BT-SWS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#BT-SWS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#BT-SWS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#BT-SWS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#BT-SWS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#BT-SWS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#BT-SWS li:hover .icon {width: 250px;}#BT-SWS li:hover .icon {background-color: #d91e76;}#BT-SWS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#BT-SWS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#BT-SWS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#BT-SWS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#BT-SWS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#BT-SWS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#BT-SWS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#BT-SWS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="BT-SWS"><li><a href="https://www.facebook.com/BlogTariffcom" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/BlogTariff" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/108581316248547169217" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://www.pinterest.com/BlogTariff" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="http://in.linkedin.com/BlogTariff" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li><li><a href="http://www.youtube.com/user/BlogTariff" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/BlogTariff" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul><div style='clear: both;'><widget by BlogTariff.com></div>

Customization:-
Replace BLUE COLOR Facebook page URL with your FB URL
Replace SKY BLUE COLOR Twitter page username with your Twitter URL
Replace BROWN COLOR Google Plus ID Value with your G+ ID Value
Replace RED COLOR Pinterest ID with your Pinterest URL
Replace Green COLOR LinkedIn URL with your LinkedIn URL
Replace PINK COLOR Youtube username with your Youtube URL
Replace Orange Color RSS URL with your RSS URL


Author Note:
If you enjoyed the above widget then don’t forget to share your views on our comment box and Subscribe to Us. We always appreciate if you Like our Facebook page and Following on Twitter.