Mouse Over Social Media Buttons

Today social sites are playing an important role to drive the visitors to let the people know about your blog/sites. People use social bookmarking buttons on their blog/sites to facilitate their fans to navigate easily navigate to fan page on Facebook, Twitter or other social networking sites and also used to subscribe via RSS feed. Thus several widgets are created to which appear on different blog/sites to allow the fans to keep in touch with the blog/sites they are interested.  So here i am going to share a beautiful widget.

LIVE DEMO

1. Login To Your Blogger Dashboard.
2. Go To Template.
3. Backup Your Template.
4. Go To Layout.
5. Click “ADD A GADGET”
6. Select “HTML/JAVASCRIPT” widget from the list and add the following code:

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#Tutorials-Park {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#Tutorials-Parkli {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#Tutorials-Park .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;
}
#Tutorials-Park span:hover {
visibility: hidden;
}
#Tutorials-Park span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#Tutorials-Park .icon {
color: #fafafa;
overflow: hidden;
}
#Tutorials-Park .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#Tutorials-Park .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#Tutorials-Park .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#Tutorials-Park .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#Tutorials-Park .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#Tutorials-Park .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#Tutorials-Park .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#Tutorials-Park .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#Tutorials-Park li:hover .icon {
width: 250px;
}
#Tutorials-Park li:hover .icon {
background-color: #d91e76;
}
#Tutorials-Park li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#Tutorials-Park li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#Tutorials-Park li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#Tutorials-Park li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#Tutorials-Park li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#Tutorials-Park li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#Tutorials-Park li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#Tutorials-Park li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#Tutorials-Park .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<br />
<ul id="Tutorials-Park">
<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>

7. Click Save.
   
   
   
   And you are all done. Refresh your blog to see the widget.
   
   
   Note: Replace "#" with your own URL.
   
   

- If you like my post, please take seconds to share.