Add Cool Mouse Hover Social Media Buttons For Blogger

Hello Guys, I here once again with a new Social Media Buttons widget for Blogger. The widget is unique and attractive with a nice hover effect. It includes all major social network's buttons and does not slow down your blog.

☻ HOW TO ADD SOCIAL SHARING BUTTONS WIDGET FOR BLOGGER

Written explanation

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it. 

<style>

#pctoolstips {

width: 260px;

margin: 5px 20px;

padding:5px;

}

#pctoolstips li {

cursor: pointer;

height: 48px;

position: relative;

list-style-type: none;

}

#pctoolstips .icon {

background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8O47u3C71OMImym8VbtxALrsYPYv90Cja-FiiR8P9XYlIc1end_kCe6_XTHVADavdQ-Omh-W3AgJ22amRsHakjvZSBkPfbhczmNkJYaqJ6yiRD1unVmNsBCCDaHQhLlfb162-vNkSg0s/s1600/pctoolstips.blogspot.com.png') 0 0 no-repeat;

background-color: rgba(217, 30, 118, .42);

border-radius: 30px;

display: block;

color: #141414;

float:none;

height: 48px;

line-height: 48px;

margin: 5px 0;

position: relative;

text-align: left;

text-indent: 90px;

text-shadow: #333 0 1px 0;

white-space: nowrap;

width: 48px;z-index: 5;

-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;

-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;

-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;

transition: width .25s ease-in-out, background-color .25s ease-in-out;

-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;

-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;

box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;

text-decoration: none;

}

#pctoolstips span:hover {

visibility: hidden;

}

#pctoolstips span {

display: block;

top: 15px;position: absolute;

left: 90px;

}

#pctoolstips .icon {

color: #fafafa;

overflow: hidden;

}

#pctoolstips .fb {

background-color: rgba(45,118,185, .42);

background-position: 0 -382px;

}

#pctoolstips .twit {

background-color: rgba(0, 161, 223, .42);

background-position: 0 -430px;

}

#pctoolstips .google {

background-color: rgba(167, 0, 0, .42);

background-position: 0 -478px;

}

#pctoolstips .rss {

background-color: rgba(255,109, 0, .42);

background-position: 0 -718px;

}

#pctoolstips li:hover .icon {

width: 250px;

}

#pctoolstips li:hover .icon {

background-color: #d91e76;

}

#pctoolstips li:hover .fb {

background-color: #2d76b9;

background-position: 0 2px;

}

#pctoolstips li:hover .twit {

background-color: #00A1DF;

background-position: 0 -46px;

}

#pctoolstips li:hover .google {

background-color: #A70000;

background-position: 0 -94px;

}

#pctoolstips li:hover .rss {

background-color: #EC5601;

background-position: 0 -334px;

}

#pctoolstips .icon:active {

bottom: -2px;-webkit-box-shadow: none;

-moz-box-shadow: none;

-o-box-shadow: none;

}

</style>

<ul id="pctoolstips">

<li ><a href="http://www.facebook.com/USERNAME1" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>

</li>

<li ><a href="http://www.twitter.com/USERNAME2" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>

</li>

<li ><a href="G+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>

</li>

<li ><a href="http://feeds.feedburner.com/USERNAME3" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>

</li>

</ul>

4) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it USERNAME1 with your Facebook Username. 

♥ Replace it USERNAME2 with your Twitter Username. 

♥ Replace it G+ URL with your Google+ Page url . 

♥ Replace it USERNAME3 with your Feed burner Username. 

5) Save your Widget.