Colorful Social Media Widget For Blogger

In this tutorial im gonna explain, how to add colorful social media widget for your blogger. This is very attractive because of colors. four different colors for every social network.It include nice hover style. you can link with Rss,Facebook,Twitter and Stumbleupon.You can add it with easy steps.get my other socialmedia widgets by clicking here

Demo

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 one of below code.

/*--------Social Sharing Widget bloggertrix.com ------*/
<style type="text/css">
.bloggertrix-social-widget {
width: 280px;
margin-top: -10px;
border:1px solid #000000;   
}
.bloggertrix-social-widget ul {
margin: 0;
padding: 0;
   
}
.bloggertrix-social-widget ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.bloggertrix-social-widget ul li a {
color: #fff;
display:block;
}
.bloggertrix-social-widget ul li a:hover {
color: #c9c9c9;
}
.bloggertrix-social-widget ul li .rss:hover {
background-color:#d86601;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}  

.bloggertrix-social-widget ul li .twitter:hover {
background-color:#0d8be1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}

.bloggertrix-social-widget ul li .facebook:hover {
background-color:#224ba1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }

.bloggertrix-social-widget ul li .stumbleupon:hover {
background-color:#198b09;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;  }   
    
.bloggertrix-social-widget ul li .rss {
background:
 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCJXnjRicDH1mIN5wJDoAH48UKUHSDQ6LcjgARodU0zFpaOAPx-Yv6X7MMgCzQfNs1GO2CxriIUnvjS7utSyZn4vx51B0i11WvXPcbhwEKVCLKVm6e1tozPf3uODx8MrFsc4FvODxJfriE/s1600/bloggertrix-Rss.png")
 no-repeat scroll 2px center #F87E12;
background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .twitter {
background:
 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjycNihDKrg50wKZRNGsOiWvhoXnUMsrsnMYgz0S5x1amZc39Qw7oLplXz_HGj2B4OU4nPxgryr_j2JIZeg9ywn_T9zVEj1N47D8uNux6zpgUnL273dt3Xp1VCcbroqJtENsJvNnwoK_s3t/s1600/bloggertrix-twitter.png")
 no-repeat scroll 2px center #59a5d9;

background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .facebook {
background:
 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQyfvCmDKz_2KzsDeM7U6fi_r7jtDJ7bY8CLevXs9PCtdTfxh4VeGG_0ea7pcEXXEo1y9u3-odREn95vkmBQvWzGw8rKOXlsJ6vLp9Ld_V62FsBlGyDSRgz8MfD5srwSCqdJ2z1UWC9TJ5/s1600/bloggertrix-facebook.png")
 no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .stumbleupon {
background:
 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74Q59uN7lFvRN1WvGo8ilis0oQMpOtQQBpfhywE-P2G7b83lFatzP3TiY8sVzFiYJJOuyl_WhHnqK5YLXUvsoKyzCsAqKOXdfSLnc4gi0cCrinUW3uZsIuTK5EVWS7lTj4vVcd7St7aZs/s1600/bloggertrix-stumbleupon.png")
 no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}

</style>
<div class="bloggertrix-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/bloggertrix">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/bloggertrix">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/bloggertrix">Find me on Facebook</a></li>
<li><a rel="author" class="stumbleupon" href="http://www.stumbleupon.com/stumbler/soharox/">Stumble on Stumbleupon</a></li>
</ul>
</div>