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

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUgAd3xpeF45YWt0K8BGT2jTCLgmyvFiyCo8BVDQa2XE4Th7L-aDFoaiPbxHermfTEZM4O-XYD-my15Z1g6gXPZ9iq4E_RyuZ01F2MNrrln_jcB8sOWLyOdJvMTOB74deV-c_mSDYJ5u_9/s1600/Facebook.png'/></span></a></li> 
<li><a href='http://twitter.com/mohammed1811990' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-aAsSbcQxGXAOB78ty8H_T1dnoV_O9lmyjYgcADEopoDPjrTh1IiCUEXg6fS7ehfOdIzHYjODbqigedJYBTQ6yf099dDaayiV1U84jFtQUF91UAHjoJ3GkYtnwtrlS6jh0cPqnwBgk0B/s1600/Twitter.png'/></span></a></li> 
<li><a href='https://plus.google.com/+مدادالجليد' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2B2-r2srwnH5Hphd1OKPjB0K2p87II7Pw5P9RPt39OLndvZUYjvTomiNvK8rh4ZsNH6FeNTrIPwaPcxog0l5b9WjmylCWmKLqHhlr1o9plwBblaT-NeDXtGVT3lGjxkvtjO4qKkfL1t-A/s1600/GooglePlus.png'/></span></a></li> 
<li><a href='http://www.pinterest.com/mohammedmaher' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbWYnVJLlEKSANo_Y2K95_8VR6BNeTYCtmCxpneVXeRU4ZqVFKzd4EAVwsgm9CkNtZsDMj1Aog-j8hyfqoYjONzQL2C5QbCnvZUhYterQ7ZMwZev50sZS9h2TNiGohpPJ6c2SNxpCL0D-/s1600/Pinterest.png'/></span></a></li> <li><a href='http://feeds.feedburner.com/blogspot/medad' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2I5exHTPAfcTPxY6TZM5jVm_lXjO4iY9kJ-3ZVP_HmHf5ejtmCoRrJGgldhYP69xidSmB0K9ESHdHhmunRSIoqyI_3BagvOFvsoNjD1GnewHIL73mHcIt4k73Tyy6itfccwAvqgNao8Nx/s1600/Rss.png'/></span></a></li><li><a href='http://www.youtube.com/user/معرف القناة' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgH088MlKWHFGxssctPr67CDObsIhKi1Qyj34qWnQLgLx3HCB9kGPyvjL4Ur7XZOpESZZb06QUbnWE6EFdTaMS7t785feVS6yFhVbB3j-UaLLLG3igy_nGWQ5jPEvPX5Xhqp1o0GjaWdkP/s1600/YouTube.png'/></span></a></li></ul>