» » Add Floating Social Media Sharing Buttons To Blogger| Social Media Sharing Buttons

on
No Comment
Add Floating Social Media Sharing Buttons To Blogger
Hello friend s today i am going to teach you How to add social media sharing Buttons to Blogger. After creating a quality content all of us want to share with people and social media is best for that. By Adding social media sharing Buttons to Blogger you are giving an option to user to share your content with other by which number of visitors also increase. as well as number of social count also increase. So just follow me to learn How to add Social media Sharing Button to Blogger.


 Step 1. Go to Blogger Dashboard 

 Step 2. Click on layout section of Dashboard.

Add Floating Social Media Sharing Buttons To Blogger 

Step 3. Click on Add a Gadget as you can in image above After this step a popup box will appear like this.
Add Floating Social Media Sharing Buttons To Blogger

Step 4. Select HTML/javaScript Gadget and then you need to copy and paste code given below to the Gadget.
 <style type="text/css">
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from helplogger.blogspot.com">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='kundansviet' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://helplogger.blogspot.com/">widget</a></div></div></div>

 Customization:
  • You can change vertical alignment as in above code it is 15%
  • You can change value of Horizontal alignment also according to your need
  • Replace kundansviet with your Twitter profile.
You are done. Now in every post social media sharing button will appear. Dont forget to like and comment if this post is helpfull for you
Share: