Cara Membuat Spinning Social Media Icon Dengan CSS3

Spinning Social Media Icon, disini saya akan membahas bagaimana cara membuat sebuah widget social media dengan icon ditambah saat pointer mouse diarahkan ke icon tersebut, icon tersebut akan memutar.

Cara membuat :
1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Expand Widget Template > Cari kode ]]></b:skin>
3. Setelah ketemu, letakan kode di bawah ini tepat di atas kode yang dicetak tebal tadi.

/* Spinning Social Media Icons by blazerracing.blogspot.com */
.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/AVvXsEg-4dAkwvy-i_hqbCAFwr6jCG119tWRIUZcuVWrRgk7xuLpO47gHbGHJzgzhfBOhjCqHLgMfor-lS2fGGnQkK-NYNUvkAUmVT8blZRQoDNeguk2OXZ4XQu3CItMifRTr5I21wGK3p6Q0A8/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVPx7JSB7kpI0tOWG3TfQMeYH7AuxMv2uiyj_Uj8XK3rK6v35erfEBsEwCUzQw7o4AxuJhsWLe5ILJXQ69nhson8bcOVNrKIKf5fwyJ9AcfM696nngS4unErfLsqTiUi3v-AypxGqXDTg/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEf_RemhFtgiZ7qLCU7OE11p75EWvlDgUavlygtUoPhgeQB_AMj7q27vLN1rExL3IZp_X_du9pLNmODZdiR9iIf5iOyiUtsM3t8C82uhkXeJpum8KS5_834kbFfPjfap5k6povqpqLpvE/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuGwTrFS4XvMBnIlWN-9JoywkmN7Vwu-6ZsjLutAjzS9S1Ds8kJMUlebRCx2iwxMh3rA-m6BAerpOYwjWKagY7wKEboeG9uzJf0-lY91dHFq6Rt2wLwlPakURcw18y1keIiw7EeT7MtRY/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQqmShqjZEJXGcsxoWRosbLByS6d88RwyKJNUln1Hsg9R0_Z5dL0z7b7OWJ31dzZ68COK3BlL15xywD2Hb2PLnxZLr3MlrQgKUVetoql9ln-CPUpKS4LtwU00i2rELY6ApY4jILx4oANQ/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGOEzvth1fpbRr0JXRZjDi8JiMjz_AUIXeZN5ELJLuXBSmELpbNhR-syfmZvvKWcOSobm8Q9mzraCq89A-it_Bo60PiZyPkjwzLf25LEh4i9Eh_ttZp1lorkFZLCQsQiiM7S4L0fj9V0/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW57e5VU2itJm20qf6ujOSi9qHwmyPARX8BUWX2AWiO4lvVYXnVa2lsN1jsJ3LjuwGL1Sf5DSGXpnoFYefYTJpU-fjiiLJ0e9M_K6VB9RFLIB5UZhVD6CiMgMZqXgBgRHgfMlZ10_eRmg/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbbay3nD0Obnvsl3bqjuGBlr7tdjOTz_bLzSy2ktycVS3yukKstUsHzdmGMh2l16wK1gdeLgjCbjS4HR8VRM1oTfSkp56pMJFV1dA0OnrbrkAjzZRu3NDtxNGZ7NZIl_eD-ytuSmBskDo/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ctd8G1VDE_j-pQuovow3_TM4C6c091-rVWIr9MG-W7jK-OnuKXHad4So2ppHQ00PF0WqaGcrUMvsXIlMv1r92WwXUGKCP_BTLsosq1Wx-cXXjQkwIw76iHR5bOskUNdGlBydUaOL15o/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuPQPOKZ3z7_bU27FeN8FGpbySOMNMPUDU_ZYChEgmO4f22B590L1q5rSR6wu3N115Tpdj8TYQbQP8W4xLLuMh5qoNBUfmieL4FiRd-kC1jeaZw76EoUokrVvA5Bl_9tQdjOHJXlFg40/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU1_-f2mIXTs4m0eACkYT153CgGxLawR9cLUZH6tgySyOErBQwyO_zeNbwGvnbLzOGZ0xerDrfpOcbIYVNJ90jRk42qG0O7ZQx7tpu_67u-9EH5NBy6jyEguKm1O64YbhzaaVdAi_v740/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1w_Os0ugzaqcVBiIrtuHygHXs3oFD7g7W7dUn0ZxEkoPnzVORDKMn1MfBOPIkgjcUDvB8dvEmTGi8IACqRM-dCIb2wI5HXGS3E6LVPDsozqfvpES9IMpOR3QPXEl3vwgCbwPVokNgAeU/s1600/youtube_32.png'); }
/* Spinning Social Media Icons by blazerracing.blogspot.com */

Jangan Edit kode di atas atau ga akan bekerja.

4. Selanjutnya cari kode <div class='post-footer'> jika tidak ada cari kode <data:post.body/> setelah ketemu letakan kode di bawah ini tepat di bawah kode yang di vetak tebal.

<!--Start Social Media Icons from blazerracing.blogspot.com -->
<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 blazerracing.blogspot.com -->

Ganti kata Social profile dengan username dari masing-masing social media, jika ada salah satu belum punya kosongkan saja, tapi kalau untuk Facebook dan Twitter pasti sudah punya.

sumber