Add CSS3 Spinning Social Media Icons In Blogger Blog

I have a great love on social media being a blogger and it is one of my strategy too in driving quality traffic to my blog. If you are a serious blogger, you must also make use of social media to promote your blog effectively. You might have seen most websites and blogs  uses social media buttons at the header, footer or at the sidebar, to attract visitors to click on their social media profiles and follow them. This widget shows a spinning hover effect. When you hover your mouse on these icons, you will see 360 degree spinning effect. This CSS3 spinning effects must draw the attention of your blog visitors or readers and force them to click and follow you on social media. In this waay you got a lot of traffic from social media websites . Now follow these steps to add this widget in your blog

CSS3 Spinning Social Media Icons Demo

LIVE DEMO

How to add CSS3 Spinning Social Media Icons To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the following code Before/above it

/* Spinning Social Media Icons by www.mybloggertools.org */

.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.6s ease-out;
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI3Iv8px5RliOAcS8dPfP_q2kC8zHyNLkRFlY2A2fVzRDQnZBca7f18qEn75J1yugLTKEPx3V2TvM67DYcf3Od4h3FVZi6CS1DU9RwD20PB_bffRS4M8y0d1AdtWECTrfFS4R1ncyJ1Xg/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJk44hehZKUNxiHqd52KGNUOYlHFuGWvpVfDw2u8mIH8sbV9ovNxbxIDuLVfXhaKcMNtkWUD7lwbVoblGbMPk8SI94d0I0FuSWd38WGv4FY8DbwKl2I7P6FbEw-VHXXkEv_cbctWb31bc/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2iDw7flVNZOUAvI3bHbp_mgq4a2d_MZ4NyWIKgDeaaWD7P8HvBlIEGPBvh9TCrz4oudVmcOBecVmMvUv5dtalQpqc1nzs2m8UbsMo5IivBDlfLRSsi5N5mNgGjRA8EVZuAtIzWN_eHdc/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqLuzLhRILubXxZCTzSwgiTn7d8E6w2swCTyP-cAyhYRms7PK8iSAYLgh75M1D7t0o_6aQVnL9Qg1AcxzehSn-eZKzUUcUMsysHYgkxrEI35M3RKaZ1KCt4jDOaeLw16rR-pwP-RhjUxg/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nzhAcOZehP3IIDtBElNPyMiTcm9tt7eK58n7oMjSxM6azNzKjcklS5nioPLSFgZmPSyZJR_VJzKc4Ojm2JbmrA6SuQOdaWUB4LH9Kt2wIXRH5Wgd2GnCklFiJ3VMYBCXAtAXkkgyp40/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxEuur7pwX4_JuVy31owNdnra9iALyW8OPvhP8krzwQA2bgeKtQr5_-WsBinTM96p0ypzEBmhFHt6OiEAkqe3lqv-VXV2b81gEcNHTUNECA5lwrWZGUQmPuDQouam7DeQ7JBdVwXf1B0/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-B87_36YSkETv_5o1wduw8DYTX0l_FaXxWJAbgfQif4brgxjiKp5vccG-xlcjTAcr_J57UsVJqd9mPLKG4iuM1MQztTWOilr6AnBVlitaDKr_qOLUa2iMzzFMR8gFZ_hrQzfpMEj-K0/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm84rsf_pm8OyR_xikJdmKcky2zxxoDI3k14Xl7Q6ttvx29Dn-cxqzfBDOQgDW9pAItDsARZBkCf_nm0frH-mUvMha7AgvUJUcMUtJPN-CdSbiAFWfEXprq3bcdYIrKVAWzi6d7rjhfFY/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW1Rh3ol697RCdomS5I4SllFACMEB_7hON9_U19iFyMqidvsmAx_TQiZLplpUm1WsGpF2FcSeMRENdzmj_MF6adoulm4aCOVrvWiGVxWZSihqUezbg9fYLwvetV-tTbYsjsOUaBZHMlZc/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1UmLjiDS-0kfnWnSJHvcQZ_srEDTDLqSyBdtsWzQlKV0SclxXjzr5cGn1FXCwCShUv2RpBcGATDih3-n_jiQiKQ4Cjp_fCSOL7IZfljM-IKIddTCPydDsw6nhEx-60YnTH_PS4tbsf0g/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wNL6MpWeyMALB6OIFwpbSrcnRicDF5fT64SZnhZY9_6QFm9lQhOThQaWdXP52W-2nx8c7dM9VELK4NuNAGB2PH919DvmhVh7x4v2KoBDc10u_P1xaSK1MNvmeeqfKJzX0n-Wc0wi_S4/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWaLRRcK_xSOwgXHz0GTRvjTzt5hGKWNGjVH1OqG1EGtymw6et-cReFoZRc9KISNj8y-LHSpq3BWgVUgQwZkSM-nLq2yXjfJEsz0Xk9fuRoGJzYK8S6gIJGpLJaoEWatrRB-vAwU33CQs/s1600/youtube_32.png'); }

/* Spinning Social Media Icons by www.mybloggertools.org */

• Now To Find The Code Shown Below

<div class='post-footer'>

• Replace The Above Code With The Code Shown Below

<div class='post-footer'>

<!--Start Social Media Icons from http://www.mybloggertools.org -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="spinning_icons">

<a href="http://www.twitter.com/social profile" class="twitter" title="twitter">Twitter</a>

<a href="http://www.delicious.com/social profile" class="delicious" title="delicious">Delicious</a>

<a href="http://www.digg.com/social profile" class="digg" title="digg">Digg</a>

<a href="http://wwww.dribbble.com/social profile" class="dribbble" title="dribbble">Dribbble</a>

<a href="http://feedburner.google.com/fb/a/mailverify?uri=social profile" class="email" title="email">Email</a>

<a href="https://www.facebook.com/social profile" class="facebook" title="facebook">Facebook</a>

<a href="http://www.flickr.com/social profile" class="flickr" title="flickr">Flickr</a>

<a href="https://foursquare.com/social profile" class="foursquare" title="foursquare">Foursquare</a>

<a href="http://in.linkedin.com/social profile" class="linkedin" title="linkedin">Linkedin</a>

<a href="http://feeds.feedburner.com/social profile" class="rss" title="rss">RSS</a>

<a href="http://www.stumbleupon.com/social profile" class="stumbleupon" title="stumbleupon">Stumbleupon</a>

<a href="http://www.youtube.com/social profile" class="youtube" title="youtube">YouTube</a>

</div>

</b:if>

<!-- End Social Media Icons from http://www.mybloggertools.org --> 

CUSTOMIZATION TO THE WIDGET

• Replace social profile with your social profile
• The code shown in blue color make the gadget only appear below your posts and not shown in the home page . If you want to make the gadget to appear at the home page remove the lines shown in blue color
• Now save your template and check the widget

Like it? Share it.