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

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

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

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

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

background-size: 30px;
padding: 17.5px 45px;
}
.modernhackerss-social-widget ul li .facebook {
background:
 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijjyhp4jaunt3Xoa6d0YmW_JMr5CN51SDjBp0oGYkmYF5SJtpOejFsU3mu22b2Lad_4hhwvkvcqnAfIPlF-cOYxoawlLax8MounzEXY4frpKMeWJtNeYSxl-2iJucr5JjZkyXVT9kN8siu/s1600/bloggertrix-facebook.png")
 no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.modernhackerss-social-widget ul li .stumbleupon {
background:
 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ttvg2E9gTvzOpFoztXoUUO7Ei48odbG_weyLqgZwUvbxMr23WYvG9KnSlVRe67JG9m_YKjaiOqDho4zbK8EB-jwXR7o6hWpzqM5MWQdSrJmM1gnFzxeWQCAqNygyrf-2-_RX-4cI0feW/s1600/bloggertrix-stumbleupon.png")
 no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}

</style>
<div class="modernhackerss-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/modernhackerss">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/modernhackerss">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/pages/Modernhackerss/229304697206442">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>

Replace with your profile URLs where i highligh with red color text.

7. Now save your HTML/Javascript'.

    You are done...

 For any help please comment here...