Spinning Social Media Icons

Social Media Icons
Social Media Icons on your blog/website are a great way to get traffic. When any visitor will come, He/she will click on media icons and he will sent to your Facebook-Twitter etc, and they can like or follow you.

Spinning Social Media Icons
Spinning Social Media Icons are beautiful. I also have added Hover Effect + Opacity to them. So when you will hover mouse on them, They will spin in a very beautiful style and will become bright. Click on Live Preview button to see live demo of Spinning Social Media Icons.

Live Preview

I will provide CSS/HTML code for these icons, and will also tell how to add them in Blogger.

CSS Code

.curvedsocialicons li {
display:inline-block;
cursor:pointer;
width:48px;
height:48px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77iP-F95HMv_BovZ6vx8AugUYQ3yHmCPUphocd_t3MZx0ZtKyxgCYRhz_6U_f72MQ8nCXCHRlSNci78wqf2iqR9ixwsQMhiGhR25kCNnFxZhPp8aGrTf3ARMgBXWv-IjSmHNH8RIlJBU/s1600/All+Social+Icons+PNG.png');
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
margin-right:1px;
margin-bottom:2px;
opacity:0.5;
}
.curvedsocialicons li:hover {
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
opacity:1;
}
.curvedsocialicons li.facebook {
background-position:0 0;
}
.curvedsocialicons li.facebook:hover {
background-position:0 0;
}
.curvedsocialicons li.twitter {
background-position: -48px 0;
}
.curvedsocialicons li.twitter:hover {
background-position: -48px 0;
} .curvedsocialicons li.rss {
background-position: -96px 0;
}
.curvedsocialicons li.rss:hover {
background-position: -96px 0px;
}
.curvedsocialicons li.google {
background-position:-144px 0;
}
.curvedsocialicons li.google:hover {
background-position:-144px 0;
}
.curvedsocialicons li.linkedin {
background-position: -192px 0;
}
.curvedsocialicons li.linkedin:hover {
background-position: -192px 0;
}
.curvedsocialicons li.pinterest {
background-position: -240px 0;
}
.curvedsocialicons li.pinterest:hover {
background-position: -240px 0;
}
.curvedsocialicons li.stumbleupon {
background-position: -288px 0;
}
.curvedsocialicons li.stumbleupon:hover {
background-position: -288px 0;
}
.curvedsocialicons li.reditt {
background-position: -336px 0;
}
.curvedsocialicons li.reditt:hover {
background-position: -336px 0;
}
.curvedsocialicons li.instagram {
background-position: -384px 0;
}
.curvedsocialicons li.instagram:hover {
background-position: -384px 0;
}
.curvedsocialicons li.tumblr {
background-position: -432px 0;
}
.curvedsocialicons li.tumblr:hover {
background-position: -432px 0;
}

HTML Code

<div class="curvedsocialicons">
<ul>
<li class="facebook"><a href="FACEBOOK LINK" target="_blank"></a></li>
<li class="twitter"><a href="TWITTER LINK" target="_blank"></a></li>
<li class="rss"<a href="RSS LINK" target="_blank"></a></li>
<li class="google"<a href="GOOGLE LINK"target="_blank"></a></li>
<li class="linkedin"><a href="LINKED IN" target="_blank"></a></li>
<li class="pinterest"><a href="PINTEREST" target="_blank"></a></li>
<li class="stumbleupon"><a href="STUMBLE UPON" target="_blank"></a></li>
<li class="reditt"><a href="REDITT" target="_blank"></a></li>
<li class="instagram"><a href="INSTAGRAM" target="_blank"></a></li>
<li class="tumblr"><a href="TUMBLR" target="_blank"></a></li>
</ul>
</div>

Replace LINKS with your social profile links.

Add Spinning Social Media Icons To Blogger

Step 1: Go to Blogger, and log in to your account.
Step 2: Go to Layout.
Step 3: Click on Add a Gadget.
Step 4: Choose HTML/Javascript.
Step 5: Leave the title box empty, and paste the following code in the Content Area.

<style>
.curvedsocialicons li {
display:inline-block;
padding:0;
cursor:pointer;
width:48px;
height:48px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77iP-F95HMv_BovZ6vx8AugUYQ3yHmCPUphocd_t3MZx0ZtKyxgCYRhz_6U_f72MQ8nCXCHRlSNci78wqf2iqR9ixwsQMhiGhR25kCNnFxZhPp8aGrTf3ARMgBXWv-IjSmHNH8RIlJBU/s1600/All+Social+Icons+PNG.png');
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
margin-right:1px;
margin-bottom:2px;
opacity:0.5;
}
.curvedsocialicons li:hover {
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
opacity:1;
}
.curvedsocialicons li.facebook {
background-position:0 0;
}
.curvedsocialicons li.facebook:hover {
background-position:0 0;
}
.curvedsocialicons li.twitter {
background-position: -48px 0;
}
.curvedsocialicons li.twitter:hover {
background-position: -48px 0;
}
.curvedsocialicons li.rss {
background-position: -96px 0;
}
.curvedsocialicons li.rss:hover {
background-position: -96px 0px;
}
.curvedsocialicons li.google {
background-position:-144px 0;
}
.curvedsocialicons li.google:hover {
background-position:-144px 0;
}
.curvedsocialicons li.linkedin {
background-position: -192px 0;
}
.curvedsocialicons li.linkedin:hover {
background-position: -192px 0;
}
.curvedsocialicons li.pinterest {
background-position: -240px 0;
}
.curvedsocialicons li.pinterest:hover {
background-position: -240px 0;
}
.curvedsocialicons li.stumbleupon {
background-position: -288px 0;
}
.curvedsocialicons li.stumbleupon:hover {
background-position: -288px 0;
}
.curvedsocialicons li.reditt {
background-position: -336px 0;
}
.curvedsocialicons li.reditt:hover {
background-position: -336px 0;
}
.curvedsocialicons li.instagram {
background-position: -384px 0;
}
.curvedsocialicons li.instagram:hover {
background-position: -384px 0;
}
.curvedsocialicons li.tumblr {
background-position: -432px 0;
}
.curvedsocialicons li.tumblr:hover {
background-position: -432px 0;
}
</style>
<div class="curvedsocialicons">
<ul>
<li class="facebook"><a href="FACEBOOK LINK" target="_blank"></a></li>
<li class="twitter"><a href="TWITTER LINK" target="_blank"></a></li>
<li class="rss"><a href="RSS LINK" target="_blank"></a></li>
<li class="google"><a href="GOOGLE LINK" target="_blank"></a></li>
<li class="linkedin"><a href="LINKED IN" target="_blank"></a></li>
<li class="pinterest"><a href="PINTEREST" target="_blank"></a></li>
<li class="stumbleupon"><a href="STUMBLE UPON" target="_blank"></a></li>
<li class="reditt"><a href="REDITT" target="_blank"></a></li>
<li class="instagram"><a href="INSTAGRAM" target="_blank"></a></li>
<li class="tumblr"><a href="TUMBLR" target="_blank"></a></li>
</ul>
</div>

Change LINKS in the code with your Social Profile Links.


These are made with CSS Code, I've used background-property to display each icon. If you want to remove any icon, Just Remove it from HTML Code. Example: You want to remove TUMBLR just remove 
<li class="tumblr"><a href="TUMBLR" target="_blank"></a></li>
from the code and it will not display.

You can change 360deg in the code, with any value. Like 120deg or -360deg, and the Icons will spin in a new style.