Add Cool Mouse Hover Social Media Buttons For Blogger/Website
Written explanation
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
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/AVvXsEgRhef8zfsOys3Dbe7ztmWJ1bkcFtlzdwEkFsJYjeask022YgH46c_As0OHe3xk-15s2gYDVcIJQt6-qI5GSzhyphenhyphenmdJbhdeY35J_bzeOZPN9PwuiQs9Dm08WLOdPiEUJjj37fK6J9vhpsII/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.
