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

1. لوحة تحكم بلوجر
2. إضافة أداة
3. HTML/Javascript
4. يمكنك المعاينه من هنا

<br /><div class="widget-content"><div><a href="https://twitter.com/tuhfawebserv" title="تابعنا على تويتر" class="social-link social-twitter"></a><div><div><a href="https://www.facebook.com/tuhfawebserv" title="تابعنا على فيس بوك" class="social-link social-facebook"></a></div><div><a href="https://feeds.feedburner.com/" title="التغذية" class="social-link social-rss"></a></div></div></div><style type="text/css">.tuhfaweb9-social { height: 40px; padding-top:10px; padding-bottom:10px; } .tuhfaweb9-social > div { float: left; margin-right: 20px; } .tuhfaweb9-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/AVvXsEgAVY-9WcapNt8aMkj4gJdN7yxIU_NdrD42xfR6tF2x8a80Z80mImyc_6GA3-f_5P7m2mpNYfxLqApKGs05p6Uhy2jf_vLl6R0_POKhIbmn_R8SOZx7OqyHzmDN_Zy8CSz7Vfw9-RicHFI/s1600/twitter-sprite.png) } .social-rss { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QC0XcUQSboQoHtlWjpSo8tJEikvdMawEqwklyZWo7tpG-o5rtbmyDtj-xQjB3OVA27BgPCczAVrDx_0veaOKf8zxE81sfkwY1gCiCn9cQwpflkiRusnHl_MQOBzh6Bf0MBQOTkaAvhQ/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/AVvXsEiW9IU0rtYl9jM7kSCKIYxVPgxyrMGTlT4o7pvIH-L648zvO3593JPLOv-DItrPbLAl8x_GT7-dOuJg9Hx3wLZ5q1vKmH9LBy4V1Watw0XcXvacO-4s1CLYeahZt9HhCPJ2eFED7Bv48Hs/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><br /></div>