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

Social Media button

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


<!– 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><span>Like us on Facebook</span> </li>
<li><a href=”https://twitter.com/nafisflahi” class=”icon twit”>Follow
us on Twitter</a><span>Follow us on Twitter</span> </li>
<li><a href=”https://plus.google.com/103785803956457565128″
class=”icon google”>Follow us on Google+</a><span>Follow us on Google+</span>
<li><a href=”http://www.pinterest.com/nafisflahi” class=”icon pint”>Follow
us on Pinterest</a><span>Follow us on Pinterest</span> </li>
<li><a href=”http://in.linkedin.com/nafisflahi” class=”icon linked”>Follow
us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
<li><a href=”http://www.youtube.com/user/nafisflahi
class=”icon ytube”>Follow us on Youtube</a><span>Follow us on Youtube</span>
<li><a href=”http://feeds.feedburner.com/nafisflahi” class=”icon rss”>Subscribe
via RSS</a><span>Subscribe via RSS</span></li>

  • Now change the nafisflahi with your Facebook page name 
  • Now change the  nafisflahi with your Twitter user name 
  • Now change the 10378580395645756512with Google+ ID
  • Now Change the nafisflahi with pinterest user name
  • Now Change the nafisflahi with linked user name
  • Now Change the nafisflahi with YouTube user name
  • Now Change the nafisflahi with Feeburner user name

Hit on the Save button
I hop this post is helped you so do not forget to share your review through the comment box