إضافة ايقونات التواصل الإجتماعي لمدونات بلوجر بشكل جميل متحرك

ul.flatflipbuttons{ 
position:fixed; 
padding:0 0 3px 0; 
bottom: 22%; 
margin-left:0px; 
float:left; 
list-style:none; 
-webkit-perspective: 10000px;  
-moz-perspective: 10000px; 
perspective: 10000px; 
}
ul.flatflipbuttons li{ 
margin:0; 
display: block; 
width: 25px;
height: 25px; 
margin-bottom: 25px;
background: transparent; 
text-transform: uppercase; 
text-align: center; 
}
ul.flatflipbuttons li a{ 
display:table; 
font: bold 36px Arial;
width: 100%; 
height: 100%; 
color: black; 
background: transparent; 
text-decoration: none; 
outline: none; 
-webkit-transition:all 300ms ease-out; 
-moz-transition:all 300ms ease-out; 
transition:all 300ms ease-out; 
}
ul.flatflipbuttons li a span{ 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
display: table-cell; 
vertical-align: middle; 
width: 100%; 
height: 100%; 
-webkit-transition: all 300ms ease-out; 
-moz-transition: all 300ms ease-out; 
transition: all 300ms ease-out; 
}
ul.flatflipbuttons li a img{  
border-width: 0; 
vertical-align: middle; 
}
ul.flatflipbuttons li:hover a{ 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg); 
background:   transparent; 
-webkit-transition-delay: 0.2s; 
-moz-transition-delay: 0.2s; 
transition-delay: 0.2s; 
}
ul.flatflipbuttons li:hover a span{ 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg);
transform: rotateY(180deg); 
-webkit-transition-delay: 0.2s; 
-moz-transition-delay: 0.2s; 
transition-delay: 0.2s; 
}

<ul class='flatflipbuttons second'> 
<li><a href='https://www.facebook.com/mdadice' target='_blank'><span><img src='http://3.bp.blogspot.com/-t2OeGefih4U/U5IPPsNQZtI/AAAAAAAAYfc/WeQxZk-c7Jg/s1600/Facebook.png'/></span></a></li> 
<li><a href='http://twitter.com/mohammed1811990' target='_blank'><span><img src='http://4.bp.blogspot.com/-y9S65ae0hUY/U5IPSg4UMHI/AAAAAAAAYf8/CM0C8sfJ0JY/s1600/Twitter.png'/></span></a></li> 
<li><a href='https://plus.google.com/+مدادالجليد' target='_blank'><span><img src='http://1.bp.blogspot.com/-YELFtAoKrKQ/U5IPP_Gi3AI/AAAAAAAAYfs/C2YwoKEIF2A/s1600/GooglePlus.png'/></span></a></li> 
<li><a href='http://www.pinterest.com/mohammedmaher' target='_blank'><span><img src='http://4.bp.blogspot.com/-HPTkvXcX3jc/U5IPP1dDWXI/AAAAAAAAYfg/Ee1AbEEpXRo/s1600/Pinterest.png'/></span></a></li> <li><a href='http://feeds.feedburner.com/blogspot/medad' target='_blank'><span><img src='http://3.bp.blogspot.com/-Ck1Ptx0xIeI/U5IPSdom0ZI/AAAAAAAAYf0/VVK87eMB1Ks/s1600/Rss.png'/></span></a></li><li><a href='http://www.youtube.com/user/معرف القناة' target='_blank'><span><img src='http://2.bp.blogspot.com/-VNc4pFEnxWo/U5IPSssxAMI/AAAAAAAAYf4/jhq7PvpiII0/s1600/YouTube.png'/></span></a></li></ul>