Add Multi Color Hover Style Social Media Widget to Blogger

Social networking is the good idea to increase traffic to your blog or website. Don't forget to add social media widget and sharing buttons to your blog. Today, in this tutorial we will show you how to add Smooth multi color social media widget to your blogger blog. Add this widget and give your social media profile links like Facebook, Twitter, StumbleUpon and Linkedin. Get more widgets here. Let's start the tutorial:

Recommend For You - RSS Subscription Widget With Social Buttons

Live Demo

Add Multi Color Hover Style Social Media Widget

• Go to Blogger Dashboard ›› Design ›› Page Elements.
• Click Add A Gadget ›› In New Window, Select HTML/Javascript .
• Copy The Code Given Below and Paste It Inside The Box.
• Save The Gadget and Its Done

<style>
a.blogsdaddy_twitter
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tce0hU3P8g4oEW2h9HGPTaED_Q7RmOHJRBBCKEHOu4smtpX26_hRkMFaZxuK2yfPBO-ED_21H1pMzkInnsAOgfynVeGmmOSOGDNYxPGjNk69kadWnoNjng0hySlQRsY8ad6QV6nwCHtE/s1600/blogsdaddy_twitter.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
    border:0px;
    float:left;}
a.blogsdaddy_facebook
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMYKj_oSzFDAoTqvk_kQbghCOz6BOyIz0dP-BkaAxqpPZNPY_ejfL49y9-JMcnnD_AxrxURqNMzsB2Uk3z66zlQ7QFN22ymWwQwGNrU2d44ho8jLbEVHqUj4isAmqf5m9st0q6ehsdpSeM/s1600/blogsdaddy_facebook.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;}
a.blogsdaddy_linkedin
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Vg5xl1cnHbkIb7VB7ElEzhVcale4jEVRlY4bi4EiLxqO6vNcn55-ryGsJ4Y4NJtcn9SFriuXIGGt3W4Rbj0bi1eDdIgUkmwYL4cFyHM2IlgiwYht69_dsepYCVNqTxVJct4phyphenhyphenc4RG8n/s1600/blogsdaddy_linkedin.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
a.blogsdaddy_stumbleupon
{   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY7ffrsFkWIo_KQpPL5XHuLz1PSJz8iT54Bzklcth64wo9gs2lBnoXSYWMu14H43jsxmfpqRWoei2hN8QraiRWEUlAVmi21q8BoC9SwdnYjYiIznzqsGYL_bdDwXGcyHpl9zxAy8Ptv46M/s1600/blogsdaddy_stumbleupon.jpg);
    background-position:0 0px;
    width:255px;
    height:50px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
.blogsdaddy1social a:hover
{
    background-position:0 -51px;
}
.blogsdaddy1social
{
    width:255px;
}
</style>
<br />
<div class="textwidget">
<div class="blogsdaddy1social">
<a class="blogsdaddy_linkedin" href="http://in.linkedin.com/Aagman" target="_blank">linkedin</a>
<a class="blogsdaddy_stumbleupon" href="http://www.stumbleupon.com/gaganmasoun" target="_blank">stumbleupon</a>
<a class="blogsdaddy_twitter" href="http://twitter.com/BlogsDaddy" target="_blank">twitter</a>
<a class="blogsdaddy_facebook" href="http://www.facebook.com/BlogsDaddy" target="_blank">facebook</a>
</div>
</div>

Customization

The social and RSS feed links are highlighted in red color, you need to change these to your own. If you have any questions related to Multi Color Hover Style Social Media widget please do not hesitate to leave your queries below. Cheers :)