Social Sharing buttons with Sliding Effects Using CSS3

Hello Friends. I again come with Social Sharing Buttons with Cool Sliding Effects Using CSS3. You know very well the importance of social media for your blog.This time i tried my level best to design such dynamic effects on sharing button using CSS3, so that it becomes more attractive without any rich code.In this buttons i added Google Plus, Facebook, Twitter and Mail buttons. These all the major social media channels, give more loyal visitors for your blog.I designed these buttons in this manner so that you can add these button any where in your blog or website, but it looks pretty at bottom or top of the page. Any Way here is the simple steps to add these buttons in your blog or website.

DEMO

How to add these sharing Buttons

1. The CSS3 code of these sharing buttons are given below. You have to write this code in your Style.css file.

q:before,q:after{content:''}
ol,ul{list-style-position:outside;padding-left:.95em}
li{list-style-type:disc}ol li{list-style-type:decimal}
.pbt_share-links{font-size:.8em;width:215px;z-index:1;}.pbt_share-links>.heading{display:inline-block;min-width:105px;text-align:center;color:#000}.pbt_share-links>ul{margin-bottom:29px}.pbt_share-links>ul>li{display:inline-block;overflow:hidden;margin-left:5px; padding:0px;}.pbt_share-links .share-link{display:inline-block;width:20px;height:20px;line-height:20px;text-align:left;background:#606060 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvAVFq48IbOqtx0U46IZDmVtdPLmsH6eIDcirUUiahAKRshmchC5AYhuG3mxdFbRVx-nh22CS68SsEwLYjjZFdZjsxOYAKvQR6CupvjaVulFiGuIvwj2GYCnNRZpwCVY_VlWrldix790J/s1600/social-sprite.png") scroll 0 0 no-repeat;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-transition:none .3s ease-out;-moz-transition:none .3s ease-out;-ms-transition:none .3s ease-out;-o-transition:none .3s ease-out;transition:none .3s ease-out;-webkit-transition-property:min-width,background-color;-moz-transition-property:min-width,background-color;-ms-transition-property:min-width,background-color;-o-transition-property:min-width,background-color;transition-property:min-width,background-color;min-width:0;color:#fff}.pbt_share-links .gplus{background-position:0 0}.pbt_share-links .gplus:hover{min-width:111px;background-color:#dd4b39}.pbt_share-links a.twitter{background-position:0 -20px}.pbt_share-links a.twitter:hover{min-width:83px;background-color:#419ad9}.pbt_share-links a.facebook{background-position:0 -40px}.pbt_share-links a.facebook:hover{min-width:94px;background-color:#3b5998}.pbt_share-links a.email{background-position:0 -60px}.pbt_share-links a.email:hover{min-width:77px;background-color:#5fc355}.pbt_share-links .share-link>span{display:inline-block;width:300px;padding-left:23px;color:#fff}.pbt_share-links .gplus>span>div{position:relative;top:2px;right:-2px}.page_title{margin:5px 0 0 0}

We sure that this code is added at the top of the Style.css file so that your theme cascading does not violate the other code.

   2.  Buttons decoration code is following. Add this Code where you want to show these sharing buttons.

<div class="pbt_share-links">
  <ul>
<li><span class="share-link gplus" title="Probloggingtools on Google Plus"><span>GOOGLE + <g:plusone size="small" annotation="none" href="http://www.probloggingtools.com/"></g:plusone></span></span></li>
<li><a class="share-link twitter" href="http://twitter.com/probloggingtool" title="Probloggingtools on Twitter"><span>TWITTER</span></a></li>
<li><a class="share-link facebook" href="http://www.facebook.com/probloggingtools" title="Probloggingtools on Facebook"><span>FACEBOOK</span></a></li>
<li><a class="share-link email" href="mailto:admin@probloggingtools.com" title="Reach us by email"><span>EMAIL</span></a></li>
                </ul>
              </div><!-- .pbt_share-links -->
              <script type="text/javascript">
             
               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>

     3. Edit the Social Media Links with your blog or website (Bold Words).

Credits

These sharing buttons are fully designed by the PBT. If you want to share it with your reader, you have to give a back link to PBT.

Need Help ??

If you facing any problem to implement these buttons in your blog or website, feel free to ask here. If you have any other idea or sharing buttons designs, share it with us.

Read more ...

Social Sharing Button With Hover Effect V2

Hey Bloggers, I am again with Social Sharing Buttons. This time i developed a simple, cool and attractive Social Sharing buttons using CSS. I already published a simple widget of Social Sharing Buttons with Hover effect and I am very happy that you liked that widget very so here i developed this Widget for your blog. This is a very light weight widget with less CSS and HTML code. It load in less then a second. I put mouse hover effects on it to make it more cool. I used rectangle social media icon which looks awesome in your blog.There are total five sharing buttons, start from twitter, Facebook, RSS, YouTube and Google Plus. I used these buttons because these are the very common and popular social channel in Internet world. So Lets add this widget in your blog. This widget is compatible with Blogger, WordPress and any HTML webpage ,supported by any web browser.

DEMO

You May Also Like : Simple Social Sharing Buttons With  Hover effects V1

How to Add this Widget. [Blogger]

1. Go to Blogger -> Design -> Page Element 
2. Add a Gadget
3. Choose "HTML/JavaScript" Widget
4. paste the following code in the widget Area.

<style type="text/css">
.pbtv2Social {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.pbtv2Social span {
float: left;
display: inline;
margin-right: 8px;
}
.pbtv2Social span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xaRggd2FyVVcdosyOoQDw9m1iNfWjifP620Ezr-Y85Dm1BZ6_6undwWzLm_C5UWNHoX3Zt2Y32iLhk6_-ZCpwkN_fUQMMZxKiKo9pr3vQkz7tfzNzrqD45bdTYapcXl8suO5835WPPn3/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class='pbtv2Social'>
<span><a href='twitter.com/probloggingtool' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/probloggingtools' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/probloggingtools' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='youtube.com/probloggingtools' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/111188040805340254482/posts' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>
</div>
</div>

  5. Change the Twitter, Facebook, RSS, YouTube and Google+ links with your blogs.
  6. Save the Widget and Enjoy!!!

Steps for WordPress blogs

1. Go to Dashboard -> Appearance -> Widget
2. Choose Text Widget
3. Paste the above code in Widget Area
4. Edit the Social Media Links as according to your blog.  
5. Fix the position and save the widget.

Credit

This Social Sharing Buttons Widget is designed by Labnol and further customized by PBT. If you want to share it with your readers, you have to give back link to PBT.

Need Help??

If you having any trouble to implement this widget in your blog. Share your problem with us. I will try to resolve it as soon as possible.

Read more ...