Awesome Expanding Social Media Widget For Blogger

[vc_row][vc_column width=”1/1″]

Recently I have shared coll spinning social media widget we all know social media now a day is must for every blogger because we need to get traffic to our blog and social media is the best for us to pull the traffic to our blog we have seen many blogger use Facebook Popup like Box in blog to get more likes and increase your blog traffic I always tray to share latest blogger widget for you and today I’m come here with Awesome expanding Social media Widget for blogger after reading this article you will be able to easily add social Awesome expanding Social media Widget to your blog this social media have many blogger link their social media page to their blog with attractive link but most time it that those attractive link take time to load so toady I’m sharing a awesome expanding social media widget which is made with pure css no JavaScript no jQurey used in this awesome expand social media widget

Add Awesome Expand Social Media Widget

to add this social media widget to your blog Go Blogger Dashboard >> Layout >>Add Gadget >> HTML JavaScript copy the blow code and past it in content box

<style>

<!– Code provided to you by https://www.nafisflahi.com –>
#NF {width: 260px;margin: 5px 20px;padding:5px;}#NF li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#NF .icon {background: #D91E76 url(‘http://2.bp.blogspot.com/-Wh9jq4HrRN0/UOmHSqZDWDI/AAAAAAAAJVM/5fY5LrICi6c/s1600/NBT-Social_Button.png’) 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;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;}#NF span:hover {visibility: hidden;}#NF span {display: block;top: 15px;position: absolute;left: 90px;}#NF .icon {color: #fafafa;overflow: hidden;}#NF .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#NF .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#NF .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#NF .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#NF .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#NF .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#NF .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#NF li:hover .icon {width: 250px;}#NF li:hover .icon {background-color: #d91e76;}#NF li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#NF li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#NF li:hover .google {background-color: #A70000;background-position: 0 -94px;}#NF li:hover .pint {background-color: #C00;background-position: 0 -142px;}#NF li:hover .linked {background-color: #005772;background-position: 0 -190px;}#NF li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#NF li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#TB911-SNS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style>
<ul id=”NF”>
<li><a href=”http://www.facebook.com/nafisflahi” class=”icon fb”>Like
us on Facebook</a>Like us on Facebook </li>
<li><a href=”https://twitter.com/nafisflahi” class=”icon twit”>Follow
us on Twitter</a>Follow us on Twitter </li>
<li><a href=”https://plus.google.com/103785803956457565128″
class=”icon google”>Follow us on Google+</a>Follow us on Google+
</li>
<li><a href=”http://www.pinterest.com/nafisflahi” class=”icon pint”>Follow
us on Pinterest</a>Follow us on Pinterest </li>
<li><a href=”http://in.linkedin.com/nafisflahi” class=”icon linked”>Follow
us on LinkedIn</a>Follow us on LinkedIn </li>
<li><a href=”http://www.youtube.com/user/nafisflahi“
class=”icon ytube”>Follow us on Youtube</a>Follow us on Youtube
</li>
<li><a href=”http://feeds.feedburner.com/nafisflahi” class=”icon rss”>Subscribe
via RSS</a>Subscribe via RSS</li>
</ul>