BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Responsive On Hover Social Share Buttons for Blogger

11 comments

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.

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 !

11 comments :

  1. Superb work i have tested it on my site and its awesome and plus point is that its responsive. Keep creating such widgets. Stensly - Technology Blog

    ReplyDelete
    Replies
    1. Thanks for being here Abhishek Gupta, I hope would have subscribed us for more upcoming rocking blogger tricks !
      Stay connected buddy !

      Delete
    2. I surely be connected to Bloggerheroe since it provides wonderful tricks to us. How to Shutdown Windows 7 PC or Laptop in Just One Click

      Delete
  2. Nice Sharing Buttons :)
    Thanks for Sharing this post.

    ReplyDelete
    Replies
    1. Thanks for being here Harshil, stay connected :)

      Delete
  3. This is a really great social buttons but I'm not inserting it on my Blog because my Google Pagespeed ratings are very low. lol
    http://tronicflow.blogspot.com/

    ReplyDelete
    Replies
    1. LOL Buddy, You can apply some tricks here I have posted, check them ;)
      stay connected !

      Delete
  4. It's not working, can u do it for me ??

    ReplyDelete
  5. hi Rohit
    i have tried to use this but the problem is on entering facebook page link it gives some errors

    ReplyDelete
  6. Nice Share, But i got error in link Facebook like PMG De Classic too. may any solution for this problem?

    Tips Blog maybe you like :
    How to Make a Widget Subscribe Box Responsive

    ReplyDelete
  7. Wow Nice sharing buttons i really like it
    AddedNew

    ReplyDelete

Powered by Blogger.