Responsive On Hover Social Share Buttons for Blogger

Every Blogger likes Responsive and On Hover Widgets. Today I will tell you how to add On Hover Responsive Social Share Buttons for your blogger blog.
Last time I had posted about "Responsive Shutter Social Subscription Widget For Blogger" I hope you would have installed them, if not then you can have a look on it.
You might have an official mini modified Facebook like , Google Plus One, Twitter Tweet buttons, I have figured out some coding and made unique On Hove Responsive Shutter Type Social Share Buttons you can have a look on live demo.
The widget is purely made with CSS codes which make it responsive, If you just hover on Facebook section then the like button with appear with an extreme slide transition effect.

Live Demo

Features :

1. Pure CSS.
2. Official Share Buttons.
3. Facebook Like, Twitter Tweet, Google +1 , Linked In Share Buttons.
4. Responsive and Stylish.
5. Easy Installation.

After having look on live demo you must be willing to add this widget to your blog so lets see how to install this widget for your blog.

Installation :

1. Go to Blogger > Template > Edit HTML.
2. Press CTRL + D and find the code <data:post.body/>
3. After finding the above code, copy paste the following code just below it.

<b:if cond='data:blog.pageType == "item"'>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
    width: 475px;
    overflow: hidden;
    margin: 70px auto 0;
}

.button {
    float: left;
    margin-right: 10px;
    width: 110px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 1px 0px #fdfdfd;
    padding: 15px 5px 5px;
    box-sizing: border-box;
}

.button i {
    background: #c5c5c5;
    color: #eaeaea;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.social-container {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #656565;
    line-height: 54px;
    font-family: Open Sans;
    background: #d8d8d8;
    width: 100%;
    height: 45px;
    box-shadow: inset 0 -2px 4px #c7c7c7;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.slide, .button i {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.slide {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 22px 22px;
    -o-border-radius: 0 0 22px 22px;
    -ms-border-radius: 0 0 22px 22px;
    -moz-border-radius: 0 0 22px 22px;
    -webkit-border-radius: 0 0 22px 22px;
 /* top fix */
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 45px;
    width: 100%;
    top: -35px;
}

.slide::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    bottom: 0;
}

.button:hover .slide {
    top: 0;
    border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
    top: -2px;
    position: relative;
}

.twitter iframe {
    width: 79px !important;
}

.google #___plusone_0 {
    width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
    background: #305c99;
    color: white;
}

.button.twitter:hover i, .twitter .slide {
    background: #00cdff;
    color: white;
}

.button.google:hover i, .google .slide {
    background: #d24228;
    color: white;
}

.button.linkedin:hover i, .linkedin .slide {
    background: #007bb6;
    color: white;
}

.button.linkedin {
    margin-right: 0;
}

.credit {
    padding-left: 10px;
    font-size: 14px;
    color: #172b36;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: Open Sans;
}

.credit a {
    border-bottom: 2px solid #dc4106;
    text-decoration: none;
    padding: 0 0 2px;
    color: #172b36;
}
</style>
<div id="buttons">
<div class="facebook button">
 <i class="icon-facebook"></i>
 <div class="social-container fb">
  <div class="slide">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=90&show_faces=false&font&colorscheme=light&action=like&height=21&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true">
   </iframe>
  </div>
   Facebook
 </div>
</div>
<div class="twitter button">
 <i class="icon-twitter"></i>
 <div class="social-container tw">
  <div class="slide">
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">
   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>
   Twitter
 </div>
</div>
<div class="google button">
 <i class="icon-google-plus"></i>
 <div class="social-container tw">
  <div class="slide">
   <!-- 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>
   Google+
 </div>
</div>
<div class="linkedin button">
 <i class="icon-linkedin"></i>
 <div class="social-container tw">
  <div class="slide">
   <script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
   </script>
   <script type="IN/Share"></script>
  </div>
   LinkedIN
 </div>
</div>
</div>
<div style="text-align: right;">
<a href="http://gg.gg/j0hw" target="_blank" title="Get This Widget"><span style="font-size: x-small;">get</span></a></div>
</b:if>

4. Now change the developers.facebook.com with your facebook page username.
5. After adding your facebook fan page username, You just have to Hit Save Button, You are done buddy ! Go to your blog, check any post, enjoy ;-)
I hope you would have liked this awesome widget.
Note : Do not edit anything otherwise the widget might not work properly. So just follow the steps.
Also you cannot remove our attribution link [Help Us to spread our Voice to Your Friends and Other Needful People]

If you have any problem regarding this widget you can drop your comments here or you can also share your opinion and thoughts here :)
Stay connected, Don't forget to Share This Post and Subscribe Us via Email !