Are you searching for an amazing floating social media sharing widget for blogger blog? If your answer is yes, then you come to the right place here because in this post i am going to share an Amazing Social Media Buttons Floating Widget for blogspot blogs. These Social Media Floating Buttons will surely attract more visitors and force them to share your page and website's content with their friends and colleagues. The buttons are fully floating having vibrate feature on mouse hover, in simple words the gadget will remain stable but whenever a user hover a mouse on it then every actionable social button will automatically increase its length to left side and decrease its size with vibrate activity on user leaving it. This Sharing media Gadget contains all most all major sharing Site's button such as Facebook, Google Plus, Twitter, YouTube, Pinterest and RSS Feed having simple black color (Changes color on mouse hovering).
In previous post i was share both simple Facebook Like Box and Pop-up Facebook Like Box for Blogspot sites. Which is liked by almost many users of this site. But today i have shared best sharing gadget ever. I have shown its demo on other demo site, if you want to see it demo that how it looks like then simple click on the below link to see its demo...
In previous post i was share both simple Facebook Like Box and Pop-up Facebook Like Box for Blogspot sites. Which is liked by almost many users of this site. But today i have shared best sharing gadget ever. I have shown its demo on other demo site, if you want to see it demo that how it looks like then simple click on the below link to see its demo...
How to Add Social Media Floating Buttons Widget to Blogger
This is more beautiful Sharing Gadget ever having a stunning look and user friendly design which suits to every site. In other words it is colorful sharing content gadget with proper coding and customization therefore this widget has been divided into three simple steps, So you must follow all the below mentioned steps to use this gadget on your website.
1. Go to Blogger Dashboard >> Template >> Edit HTML
1. Go to Blogger Dashboard >> Template >> Edit HTML
Step #1
2. Search for ]]></b:skin>, and paste the below set of code just before ]]></b:skin>
Step #2
3. Now search for </head>, and paste the below piece of code just above </head>
.social-buttons{position:fixed;top:150px;width:45px;z-index:9999}
.button-left{left:0}
.button-right{right:0}
.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwqXuR3a5WXQD57t5ruc2qZf47ZV5k9LFoHDxmLsKS4sK6dkaHlPiAgpfFZFNra-EcKplh8dw2Phdeog9nZA2tC0q2HZZ9pzTXLgQsIlKRx6Slvp09o-LBb0Ick0ETuyK4IBsGKZUMpyk/s1600/mas-icons.png)}
.button-left #facebook-btn span{background-position:right 10px}
.button-left #twitter-btn span{background-position:right -35px}
.button-left #google-btn span{background-position:right -127px}
.button-left #rss-btn span{background-position:right -80px}
.button-right #facebook-btn span{background-position:12px 10px}
.button-right #twitter-btn span{background-position:11px -35px}
.button-right #google-btn span{background-position:10px -127px}
.button-right #rss-btn span{background-position:11px -80px}
.social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998}
.social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2}
.social-buttons #google-btn:hover .social-icon{background-color:#DB4A39}
.social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F}
.social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638}
.social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B}
.social-buttons a:hover .social-text{display:block}
.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}
.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0}
.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}
.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px}
.social-buttons .social-text{color:#FFF}
.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}
.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}
Step #2
3. Now search for </head>, and paste the below piece of code just above </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
}); </script>
Step #3
4. Now search for </body>, and paste the below slice of code just above </body>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/tipsandtricx rel='nofollow' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/TipsandTricx' rel='nofollow' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/+AbidAziz1' rel='nofollow' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/tips4tricx rel='nofollow' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow us via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/tips4tricx rel='nofollow' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/tips4tricx rel='nofollow' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via RSS</span></span></a>
</div>
- Change "https://www.facebook.com/tipsandtricx" with your Facebook Fan page
- Replace "https://twitter.com/TipsandTricx" with Twitter ID
- Change "https://plus.google.com/+AbidAziz1" with Google Plus Page
- Change "http://pinterest.com/tips4tricx" with Pinterest ID
- Replace "https://www.youtube.com/user/tips4tricx" with YouTube Channel Address
- Change "http://feeds.feedburner.com/tips4tricx" with your RSS Feed Burner Address
5. Now after pasting and customizing all above settings just click on "Save Template" button to save your settings.
Hope you will like this Amazing Floating Social Media Buttons Widget for Blogger. Because i am searching for a best attractive social widget for blogspot for a week and finally i found this gadget best for all type of sites due to its powerful features. If you have any question then leave your comment in below section. Keep visiting my blog for more latest updates and blogging tips.