Hey Guys, Checkout this Awesome Mouse Hover Social Media Buttons for Blogger
If you want to add this widget to your blog just follow this simple steps.
1. Go to Blogger Dashboard > Layout
2. Click on Add a gadget
3. Choose HTML/Javascript
4. Copy Paste the code given below inside the widget.
<style>
#Tricky-Blogger {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#Tricky-Bloggerli {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#Tricky-Blogger .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.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;
}
#Tricky-Blogger span:hover {
visibility: hidden;
}
#Tricky-Blogger span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#Tricky-Blogger .icon {
color: #fafafa;
overflow: hidden;
}
#Tricky-Blogger .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#Tricky-Blogger .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#Tricky-Blogger .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#Tricky-Blogger .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#Tricky-Blogger .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#Tricky-Blogger .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#Tricky-Blogger .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#Tricky-Blogger .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#Tricky-Blogger li:hover .icon {
width: 250px;
}
#Tricky-Blogger li:hover .icon {
background-color: #d91e76;
}
#Tricky-Blogger li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#Tricky-Blogger li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#Tricky-Blogger li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#Tricky-Blogger li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#Tricky-Blogger li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#Tricky-Blogger li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#Tricky-Blogger li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#Tricky-Blogger li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#Tricky-Blogger .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<ul id="Tricky-Blogger">
<li><a href="www.facebook.com/zgamerxs" class="icon fb">Like us on Facebook</a>
</li>
<li><a href="https://twitter.com/vishalassassin" class="icon twit">Follow us on Twitter</a>
</li>
<li><a href="https://plus.google.com/u/0/108432524418882740014" class="icon google">Follow us on Google+</a>
</li>
<li><a href="http://pinterest.com/vishalassassin/" class="icon pint">Follow us on Pinterest</a>
</li>
<li><a href="http://zgamerx.blogspot.in/feeds/posts/default" class="icon rss">Subscribe via RSS</a>
</li>
</ul>
Customizations
Replace zgamerxs with your Facebook Username
Replace vishalassassin with your Twitter Username
Replace 108432524418882740014 with your Google+ Page ID
Replace vishalassassin with your Pinterest Username
Replace www.zgamerx.blogspot.in with your Blog Address
5. Click save
That's all
Have any problem, please comment
If you want to add this widget to your blog just follow this simple steps.
1. Go to Blogger Dashboard > Layout
2. Click on Add a gadget
3. Choose HTML/Javascript
4. Copy Paste the code given below inside the widget.
<style>
#Tricky-Blogger {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#Tricky-Bloggerli {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#Tricky-Blogger .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.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;
}
#Tricky-Blogger span:hover {
visibility: hidden;
}
#Tricky-Blogger span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#Tricky-Blogger .icon {
color: #fafafa;
overflow: hidden;
}
#Tricky-Blogger .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#Tricky-Blogger .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#Tricky-Blogger .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#Tricky-Blogger .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#Tricky-Blogger .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#Tricky-Blogger .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#Tricky-Blogger .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#Tricky-Blogger .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#Tricky-Blogger li:hover .icon {
width: 250px;
}
#Tricky-Blogger li:hover .icon {
background-color: #d91e76;
}
#Tricky-Blogger li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#Tricky-Blogger li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#Tricky-Blogger li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#Tricky-Blogger li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#Tricky-Blogger li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#Tricky-Blogger li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#Tricky-Blogger li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#Tricky-Blogger li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#Tricky-Blogger .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<ul id="Tricky-Blogger">
<li><a href="www.facebook.com/zgamerxs" class="icon fb">Like us on Facebook</a>
</li>
<li><a href="https://twitter.com/vishalassassin" class="icon twit">Follow us on Twitter</a>
</li>
<li><a href="https://plus.google.com/u/0/108432524418882740014" class="icon google">Follow us on Google+</a>
</li>
<li><a href="http://pinterest.com/vishalassassin/" class="icon pint">Follow us on Pinterest</a>
</li>
<li><a href="http://zgamerx.blogspot.in/feeds/posts/default" class="icon rss">Subscribe via RSS</a>
</li>
</ul>
Customizations
Replace zgamerxs with your Facebook Username
Replace vishalassassin with your Twitter Username
Replace 108432524418882740014 with your Google+ Page ID
Replace vishalassassin with your Pinterest Username
Replace www.zgamerx.blogspot.in with your Blog Address
5. Click save
That's all
Have any problem, please comment
