How To Add Mouse Hover Social Media Buttons To Blogger

Social media promotion is a trick to get your blog popular and also you can get huge traffic from social media . By adding this widget you can make visitors like your facebook fanpage , follow your blog twitter account . Visitors also pin your blog in pinterest , connect visitors by google+ , at last you can also improve you rss feed for your blog .


You Can Have Live Demo Below :

• Like us on Facebook
• Follow us on Twitter
• Follow us on Google+
• Follow us on Pinterest
• Subscribe via RSS

Tutorial : How To Add Mouse Social Media Buttons To Blogger

#1. Log on to Blogger dashboard .
#2. Now click on Layout Section in options tab .
#3. Click on Add a Gadget in layout .
#4. Now Click on HTML/Javascript.

 <div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#bl {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#blli {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#Bl .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;
}
#Bl span:hover {
visibility: hidden;
}
#Bl span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#Bl .icon {
color: #fafafa;
overflow: hidden;
}
#Bl .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#Bl .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#Bl .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#Bl .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#Bl .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#Bl li:hover .icon {
width: 250px;
}
#Bl li:hover .icon {
background-color: #d91e76;
}
#Bl li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#Bl li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#Bl li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#Bl li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#Bl li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#Bl .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<br />
<ul id="Bl">
<li><a class="icon fb" href="#">Like us on Facebook</a>
</li>
<li><a class="icon twit" href="#">Follow us on Twitter</a>
</li>
<li><a class="icon google" href="#">Follow us on Google+</a>
</li>
<li><a class="icon pint" href="#">Follow us on Pinterest</a>
</li>
<li><a class="icon rss" href="#">Subscribe via RSS</a>
</li>
</ul>
</div> 

#5. Now Save the gadget .


Code Customisation : 

Change all Hashtags (#) in the links to your specific urls .


Don't forgot to share our articles - "Sharing is caring"

If you have any suggestion or query related please feel free to contact us or comment in below section .