Social Sharing Button with Hover

• Home
• Social Media
• Social Sharing Button with Hover

Social Sharing Button with Hover

Posted by Unknown | 11:55 PM | Leave a Comment

Live Demo

Today i will show that how you can add social sharing button with hover on your blog. Here we have four type of different hover effects including (facebook, twitter, google+ and linkedin)

It will really look cool on your blog

First go to Blogger Dashboard > Template > Edit HTML.

Now search for this tag </head> and paste the below code above it.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

Then you have to add the below css code in your blog style or you can add it in <style> </style> tag and add them above </head> tag. or the next thing you can add below code above </b:skin> tag

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');

}

#buttons {

     

    padding: 14px 7px !important;

     !important;

    width: 660px !important;

    overflow: hidden !important;

    margin: 10px auto 0 !important;

}

.button {

    !important;

    position: relative !important;

    display: block !important;

    float: left !important;

    height: 40px !important;

    margin: 0 7px !important;

    overflow: hidden !important;

    width: 150px !important;

    border-radius: 3px !important;

    -o-border-radius: 3px !important;

    -ms-border-radius: 3px !important;

    -moz-border-radius: 3px !important;

    -webkit-border-radius: 3px !important;

}

.icon {

    display: block !important;

    float: left !important;

    position: relative !important;

    z-index: 3 !important;

    height: 100% !important;

    vertical-align: top !important;

    width: 38px !important;

    -moz-border-radius-topleft: 3px !important;

    -moz-border-radius-topright: 0px !important;

    -moz-border-radius-bottomright: 0px !important;

    -moz-border-radius-bottomleft: 3px !important;

    -webkit-border-radius: 3px 0px 0px 3px !important;

    border-radius: 3px 0px 0px 3px !important;

    text-align: center !important;

}

.icon i {

    color: #fff !important;

    line-height: 42px !important;

}

.slide {

    z-index: 2 !important;

    display: block !important;

    margin: 0 !important;

    height: 100% !important;

    left: 38px !important;

    position: absolute !important;

    width: 112px !important;

    -moz-border-radius-topleft: 0px !important;

    -moz-border-radius-topright: 3px !important;

    -moz-border-radius-bottomright: 3px !important;

    -moz-border-radius-bottomleft: 0px !important;

    -webkit-border-radius: 0px 3px 3px 0px !important;

    border-radius: 0px 3px 3px 0px !important;

}

.slide p {

    font-family: Open Sans !important;

    font-weight: 400 !important;

    border-left: 1px solid #fff !important;

    border-left: 1px solid rgba(255,255,255,0.35) !important;

    color: #fff !important;

    font-size: 16px !important;

    left: 0 !important;

    margin: 0 !important;

    position: absolute !important;

    text-align: center !important;

    top: 10px !important;

    width: 100% !important;

}

.button .slide {

    -webkit-transition: all 0.2s ease-in-out !important;

    -moz-transition: all 0.2s ease-in-out !important;

    -ms-transition: all 0.2s ease-in-out !important;

    -o-transition: all 0.2s ease-in-out !important;

    transition: all 0.2s ease-in-out !important;

}

.facebook .fb-like {

    display: block !important;

    position: absolute !important;

    right: 16px !important;

    top: 10px !important;

    z-index: 1 !important;

}

.twitter iframe {

    width: 90px !important;

    right: 5px !important;

    top: 10px !important;

    z-index: 1 !important;

    display: block !important;

    position: absolute !important;

}

.google #___plusone_0 {

    width: 70px !important;

    top: 10px !important;

    right: 15px !important;

    position: absolute !important;

    display: block !important;

    z-index: 1 !important;

}

.linkedin .IN-widget {

    top: 10px !important;

    right: 22px !important;

    position: absolute !important;

    display: block !important;

    z-index: 1 !important;

}

.facebook:hover .slide {

    left: 150px !important;

}

.twitter:hover .slide {

    top: -40px !important;

}

.google:hover .slide {

    bottom: -40px !important;

}

.linkedin:hover .slide {

    left: -150px !important;

}

.facebook .icon, .facebook .slide {

    !important;

}

.twitter .icon, .twitter .slide {

    !important;

}

.google .icon, .google .slide {

     !important;

}

.linkedin .icon, .linkedin .slide {

    !important;

}

Now its time to add HTML. Copy the below code and paste it any where you want to show "Social Sharing Buttons"

<div id="buttons">

  <div class="facebook button">

    <i class="icon">

      <i class="icon-facebook">

    </i>

  </i>

  <div class="slide">

    <p>

      facebook

    </p>

  </div>

<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&appId=App_id";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

 <div class="fb-like" data-width="80" data-layout="button_count" data-show-faces="false" data-send="false"></div>

  </div>

   

  <div class="twitter button">

    <i class="icon">

      <i class="icon-twitter">

    </i>

  </i>

  <div class="slide">

    <p>

      twitter

    </p>

  </div>

  <a href="https://twitter.com/share" class="twitter-share-button" data-via="mybloggerworlds">

    Tweet

  </a>

  <script>

    !function(d,s,id){

      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';

      if(!d.getElementById(id)){

        js=d.createElement(s);

        js.id=id;

        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

  </script>

  </div>

   

  <div class="google button">

    <i class="icon">

      <i class="icon-google-plus">

    </i>

  </i>

  <div class="slide">

    <p>

      google+

    </p>

  </div>

  <!-- Place this tag where you want the +1 button to render. -->

  <div class="g-plusone" data-size="medium">

  </div>

   

  <!-- Place this tag after the last +1 button tag. -->

  <script type="text/javascript">

    (function() {

      var po = document.createElement('script');

      po.type = 'text/javascript';

      po.async = true;

      po.src = 'https://apis.google.com/js/plusone.js';

      var s = document.getElementsByTagName('script')[0];

      s.parentNode.insertBefore(po, s);

    }

    )();

  </script>

  </div>

   

   

  <div class="linkedin button">

    <i class="icon">

      <i class="icon-linkedin">

    </i>

  </i>

  <div class="slide">

    <p>

      linkedin

    </p>

  </div>

  <script type="IN/Share" data-counter="right">

  </script>

  <script src="//platform.linkedin.com/in.js" type="text/javascript">

    lang: en_US

  </script>

  </div>

</div>

Note: If you are using blogger and if you want to show it under every post.

Search for this code <data:post.body/> and put html code of buttons under it. between this code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>