Fade Out Social Icons Widget For Blogger

Fade out social icons will give awesome look for your blog . If you have a simple or elegant background then it is the perfect social icons for your blog . This icons will get flip when you move your mouse cursor on to the icon .The script also so simple it will not effect your page loading time .you can live demo below .code credit goes to myblogger-tricks .

Live Demo : 

Instructions : How To Add Fade Out Social Icons Widget For Blogger 

• Log in to Blogger Dashboard .
• Now click on the Layout section .
• Click on the Add Gadget tab .
• Scroll down to HTML/Javascript section .
• Paste the below code and the click Save .

<style>
.social-wrap {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.social-wrap ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.social-wrap li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.social-wrap li a.facebook1 {
background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook1:hover {
background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter1:hover {
background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p1:hover {
background: #a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss1:hover {
background: #ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -454px;
}
.social-wrap li a.pinit1 {
background:#cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.pinit1:hover {
background: #cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -580px;
}
.social-wrap li a.linkdin1 {
background:#1698E3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.linkdin1:hover {
background: #1698e3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -711px;
}
</style>
<br />
<div class="social-wrap">
<ul>
<li><a class="facebook1" href="http://www.facebook.com/techrevert" rel="nofollow" target="_blank" title="Facebook"></a></li>
<li><a class="twitter1" href="http://twitter.com/techrevert" rel="nofollow" target="_blank" title="Twitter"></a></li>
<li><a class="google-p1" href="https://plus.google.com/116583861872398897560" rel="nofollow" target="_blank" title="Google Plus"></a></li>
<li><a class="rss1" href="http://feeds.feedburner.com/techrevert" rel="nofollow" target="_blaank" title="RSS Feed"></a></li>
<li><a class="pinit1" href="http://www.pinterest.com/techrevert" rel="nofollow" target="_blank" title="Pinterest"></a></li>
<li><a class="linkdin1" href="http://lnkd.in/hcsDx9" rel="nofollow" target="_blank" title="Linkedin"></a></li>
</ul>
</div>

 Customization : (Important)

• Replace the colored URL's with your desired blog URL's .

Like US and Share Our Articles .

If you have any suggestions or found any error in adding to your blog feel free to comment below .