How to Add CSS3 Spinning Social Media Icons to Blogger

Today i will tell you how to add cool CSS3 spinning social media icons in Blogger with cool spinning hover effect. These icons spin around 360 degree when we hover our mouse cursor over them.
 

How to Add CSS3 Spinning Social Media Icons

• Go to Blogger.com.
• Login to your Blogger Dashboard.
• Then navigate to Template (Design in old interface) –> Edit HTML.
• Tick the Expand Widgets Templates box.
• Now click Ctrl + F and find for this code ]]></b:skin>.
• Copy the below code and paste it just before the ]]></b:skin>.
• Now all you have to do is, paste the following code just before/after it.

/* Spinning Social Media Icons by My Blogging Techniques*/

.spinning_icons a{
width:48px;
height:48px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6V17rsunYCPxYeYnvHfMu7i-NDPm2Z2OoGwzbNbrnLqmjRQ3HOR69fbhmPBExTxFBBLFgTanDnsTjOJGVOmoebi7qZPjDjyootV6RF9c6O4_Or7oZRJaxTaWQuEHo-ZhUw3G7Q5OY8E/s1600/twitter_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRMAZSmbRemiD23nF2qRnxi1DeqLbKWXIWzdFDJXtYECkdQRM6Y_B5SXI44sYpyQCVVB1lk251euP91uNa1DmXaxb3agYzTXhUK6nY08886ObBsRAvmJpKRaFDCsxsjhec76kWAc9cxgw/s1600/digg_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA9MypwdBtf2U-7kqmXWMIHHSRJf254xoU3Gk78i0hOw8C_pwfQgjXt4qmRRGYDnQSmukPZ3EqBMl0DT_hiu1Ih3rs1xiQQniFUTDaRXPryWAGVQ1ekMDZX1qBkagCDybXP1REU59Gt0k/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3JD7Gz_0tRMZ4wupsXmfDz4_2cwlKyfvZiJFFZzrC7NW4UO0UMR_0Yw2zZ78CivMaeliY9QkOdcbhJeDFTybAo0LCavieicuiK4cZVpKDV67M_qdo7s7orKQmFhkBWyMP8ofGC4E-W30/s1600/facebook_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rutlanbw_NwKppYtrHOxZVo2aSXwfvSvdDEPqjyGLexwKbOMYy0D0mHBq-lMxUrQELHcOi-fz_nVxZwmH81cg_GyIRGQlshusToOU2pe_DFF2zyDehMQ-q1flBq5LLqweGW0xhwFmWw/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQFzhvAd9lbFifPrMcZO0DO-6I9G8MV0hU5jHl4ezI9MYNoYqQLn1CtxUNnd1z66xq9tO6Xjuw_jhUAUTQb8RTcevbcEh8je8PCPs-VAAYgerMzoNUpuj0XgRkkn1-bP3fMXHtpfk0lI8/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhpW0XCKeGxVchXH5gzmhD-xEm9mv1_NZLOGbdFqm0i1vY3SZUIXCqijU3IZKmG6QU0yOPCIfigg6JChUUsfF8hldIRejzPEkaiVQrFloNxPQHi2W-Qb5_RVV2oJ5RChClgarIJU8FHJw/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEges9VEEBL9mzTtOp5etES7cPgVFYHhODwJgHKt-qg1UzfM3iVUemRa3Np-egYGetidnFssYwzch6OR99Yu3FdOi8A4929Za5rbsezYHUbinkSKVbmvLRaaxRUNqDYBXKVahwU6Y9A_Zlg/s1600/youtube_32.png'); }
/* Spinning Social Media Icons by My Blogging Techniques */

• Now find this code given below.

<div class='post-footer'>

• Paste the below code just below the <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class="spinning_icons">
<a href="YOUR-TWITTER-URL-GOES-HERE" class="twitter" title="twitter">Twitter</a>
<a href="YOUR-DIGG-URL-GOES-HERE" class="digg" title="digg">Digg</a>
<a href=”http://feedburner.google.com/fb/a/mailverify?uri=MyBloggingTechniques” class="email" title="email">Email</a>
<a href="YOUR-FACEBOOK-URL-GOES-HERE" class="facebook" title="facebook">Facebook</a>
<a href="YOUR-LINKEDIN-URL-GOES-HERE" class="linkedin" title="linkedin">Linkedin</a>
<a href="YOUR-FEED-URL-GOES-HERE" class="rss" title="rss">RSS</a>
<a href="YOUR-STUMBLEUPON-URL-GOES-HERE" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
<a href="YOUR-YOUTUBE CHANNEL-URL-GOES-HERE" class="youtube" title="youtube">YouTube</a>
</div>
</b:if>

• Important Note : Before saving your template don’t forget to replace these with your social profile url.

• YOUR-TWITTER-URL-GOES-HERE with your Twitter User Name.

• YOUR-DIGG-URL-GOES-HERE with your Digg User Name.

• MyBloggingTechniques with your feed name.

• YOUR-FACEBOOK-URL-GOES-HERE with your Facebook Fan Page.

• YOUR-LINKEDIN-URL-GOES-HERE with your Linked In User Name.

• YOUR-FEED-URL-GOES-HERE with your RSS Feed User Name.

• YOUR-STUMBLEUPON-URL-GOES-HERE with your Stumbleupon User Name.

• YOUR-YOUTUBE CHANNEL-URL-GOES-HERE with your Youtube channel User Name.

• Save Your Template. And refresh your page to see social profile icons dancing on your site.

If you like this then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you.