Colorful Hover Style Social Media Widget for Blogger

In this tutorial im gonna  explain  how  to add  Smooth
Colorful  social media  widget   for  blogger.  By  using
this widget  you  can  link  your   social  media  profile
Facebook,   Twitter   StumbleUpon   and   linkedin IDs

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste  below code.

<style>
a.btrix1_twitter
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHEu-4I_NOkh-HCy9db_wzqBcZ28gvTBwzqpJOryweZ3hv3IfQ01y9LAInD5uVrkXDF2gti-5XmqR8twpvnaFI9nj7miMFwrZy5YhawM7S7Hw-tflOonczFuVZ2kHHRseNxBZzaIjy90/s1600/btrix_twitter.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
    border:0px;
    float:left;}
a.btrix1_facebook
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMMKnNjUKYE_-CYCoBDY6hyphenhyphenXW69S77dEgTJyCqXXC8kdDpUF2XqQTzU_v3JT8LFPMmM58W_fqshwrQaIBUO6mTkx5rs1eDveZS58ak5t3hCqUZ9E93KhMuyFMdif9sDtX3ztKMBlovoY/s1600/btrix_facebook.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;}
a.btrix1_linkedin
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGRbL3pODJZtQx3HetM3c-cLCbocOhN-9a_r9G7m0yUF5KFOKXP9IarFJv4UzGRLQ8dnUibSZ80zCcgUJx-QtoVbvLTpeFWJdAI4QKrBT9pHl6T0tC4JxJCfl0ueUMkH5QU0P37kXpxHI/s1600/btrix_linkedin.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
a.btrix1_stumbleupon
{   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnuIN5SFzMpxdxNmmDd0-VfFuetB_7Mtc3wJNd6_7BxKeyokLw0zE6wVy4egWYLKCNvxOrU-owLH_gKwSbWbcX0uYnfjvFpTBIR1kGp3PW91TD__SnjFaNfGtTPnoK59fueXM09dSlqA8/s1600/btrix_stumbleupon.jpg);
    background-position:0 0px;
    width:255px;
    height:50px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
.btrix11social a:hover
{
    background-position:0 -51px;
}
.btrix11social
{
    width:255px;
}
</style>

<br />
<div class="textwidget">
<div class="btrix11social">
<a class="btrix1_linkedin" href="http://in.linkedin.com/Username" target="_blank">linkedin</a>
<a class="btrix1_stumbleupon" href="http://www.stumbleupon.com/bloggertrix" target="_blank">stumbleupon</a>
<a class="btrix1_twitter" href="http://twitter.com/bloggertrix" target="_blank">twitter</a>
<a class="btrix1_facebook" href="http://www.facebook.com/bloggertrix" target="_blank">facebook</a>
</div>
</div>

Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace Username with your stumble username
Replace Username with your Feedburner ID

5. Now save your HTML/Javascript'.
    You are done...