Social Icons For Website or Blog

Here i will give you a awesome widgets related to social icons, which is light weighted and have less loading time. This widgets is helpful to attract your visitors and improve coming traffics from social sites. For live demo click on Live Demo link and see bottom of the website.

Live Demo

How to use ?

Follow below steps to use this widgets.

First Login on your blog
Move to layout
Select add widgets
Choose Html/JavaScript
Copy and paste blow both code CSS and HTML code.
Save you blog.

CSS Code:

<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:30px;
height:30px;
text-indent:-99999px;
float:left;
-moz-border-radius:100%;
-webkit-border-radius:100%;
border-radius:100%;
}
.social-wrap li a.facebook1 {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.png) no-repeat 0px -31px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.png) no-repeat 0px -63px;
-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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.png) no-repeat 0px -96px;
}
.social-wrap li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.png) no-repeat 0px -165px;
}
.social-wrap li a.youtube{
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.png) no-repeat 0px -195px;
-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.youtube:hover {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UZmhu6m7IR0MrE1mu1A4F1lql_LaWQvxyovEzalZRknuvBNxADi4U7G-iDqhBGaoAaWxgnQYhIT__Rb_1i5LQjA3ou_NSMuL2MLNyWviazTpxN5-J_7YmmSipq5HPlEnWfqixU3OiSEa/s1600/social-icons.png) no-repeat 0px -232px;
}
</style>

HTML Code:

<div class="social-wrap">
<ul>
<li><a class="facebook1" href="http://www.facebook.com/tutorial4us" rel="nofollow" target="_blank" title="Facebook"></a></li>
<li><a class="google-p1" href="https://plus.google.com/b/111017048615442636299" rel="nofollow" target="_blank" title="Google Plus"></a></li>
<li><a class="twitter1" href="http://twitter.com/tutorial4us" rel="nofollow" target="_blank" title="Twitter"></a></li>
<li><a class="youtube" href="https://www.youtube.com/user/Tutorial4ushitesh" rel="nofollow" target="_blaank" title="Youtube"></a></li>
</ul>
</div>