إضافة أزرار مواقع التواصل الإجتماعي شكل جميل متحرك على بلوجر

<div><a href="https://twitter.com/mohammed1811990" title="تابعنا على تويتر" class="social-link social-twitter"></a><div>

<div><a href="https://www.facebook.com/mdadice" title="تابعنا على فيس بوك" class="social-link social-facebook"></a></div>

<div><a href="http://feeds.feedburner.com/blogspot/medad" title="التغذية" class="social-link social-rss"></a></div></div></div>

<style type="text/css">
.entry-social {
  height: 40px;
  padding-top:10px;
  padding-bottom:10px;
}
.entry-social > div {
  float: left;
  margin-right: 20px;
}
.entry-social .fb-like span{
    vertical-align: top !important;
      padding-top: 2px;
}
.fb-like span iframe{
    max-width: none;
}
.sidebar-social > div > div {
    width:50%;
    float:left;
}
.sidebar-social > div > div:nth-child(odd) {
    width:60%
}
.sidebar-social > div > div:nth-child(even) {
    width: 40%;
}
.sidebar-social > div > div > a > img {
    float: left;
}
.sidebar-social > div > div > div {
    float:left;
    margin-top:10px;
    margin-left:12px
}
.sidebar-social p {
    clear: both;
    margin: 0;
    padding: 10px 0 0;
}
.social-link {
     display:block;
    height: 50px;
    width: 50px;
    float: right;
    -webkit-animation: social .6s steps(12,end) infinite;
    animation: social .6s steps(12,end) infinite;
    /*-webkit-animation-play-state: paused;
    animation-play-state: paused;*/
}
.social-twitter {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlyZKtF3b1dZvOYkEXYFP9KGswh9kx0OPMr8NsKaz1BoUe8H9c6LOQx3aS_cvDAbWI89jP6oqToDITAvbiYK4ul4rsTM-BMtC40E3P1Zviz_UrQDHd_3rbqwkXpLyCVrvsdISXDRXM5A/s1600/twitter-sprite.png)
}
.social-rss {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bNewIdyoRlhYwyQof6545q1rTKm6B85KBa_-OzbFpBba_jQZ2QZEN3zo0vT-jgdNEMbY49XFXrT9VhPY4GdoqdL3Jxti0WCAJ8Yl8uTB1C2hG76MV-e-KAM4PUi25-nJoZOaBzzswok/s1600/rss-sprite.png);
      -webkit-animation: social-rss .6s steps(9,end) infinite;
    animation: social-rss .6s steps(9,end) infinite;
      /*-webkit-animation-play-state: paused;
    animation-play-state: paused;*/
}
.social-facebook {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8HXKRlrNb1WkeL8G5ahy2JT_IGzqT79IgSvBjrgjA84u89IokyoY8s6A5dTRuPmuwDf2kkhc1gv5e3mXpVSSP_D7L8QFTXxZ5h4AzvH07FLDAqcwhya3fme9g-uWRZuFdAM7qUHKfA8/s1600/facebook-sprite.png);
}
@keyframes social {
    from { background-position: 0 0; }
    to { background-position: -600px 0; }
}
@-webkit-keyframes social {
    from { social-position: 0 0; }
    to { background-position: -600px 0; }
}
@keyframes social-rss {
    from { background-position: 0 0; }
    to { background-position: -450px 0; }
}
@-webkit-keyframes social-rss {
    from { social-position: 0 0; }
    to { background-position: -450px 0; }
}
</style>