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

السلام عليكم ورحمة الله وبركاته

مرحباً بكم زوار مدونة مداد الجليد، سوف نستعرض لكم اليوم أزرار مواقع التواصل الإجتماعي بشكل جديد وفريد من نوعه متحركة تلفت النظر إليها فهي جميلة ولها تاثير خاص

نرى معاينة

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

من لوحة تحكم مدونتك -->> التخطيط -->> إضافة أداة ثم أختر أداة HTML/Javascript

ثم أضف الكود التالي داخل الأداة:

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

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

<div><a href="http://feeds.feedburner.com/blogspot/itFRx" 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/AVvXsEhdn-006i-elqm89wW1mk6YUFDSk4I76YuVj1FoHzrOpJa5L8brxJmnBN7rgOh541PVMU5xNgVDpS6YyrBrAUQoL2svf12Ba1vSlb_tq8ztAcIQb_OVIsbP274pB4zMLm6YpfPKmA8ymnw/s1600/twitter-sprite.png)
}
.social-rss {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7HF-L25vdkcDuxK7JupvbRs6NnCrh1hXyhlnWMcz_40suONZusF1CyMpLQ4i_q6qwP7jaMbL3KlUH4t7i6dKy3celsZXpK0n8Zw5RYKi85-RfTTltVmQFzh6Qwqxjo8OEOvBCQPeMHQ/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/AVvXsEhEgFGNDUZoDbc5NXuKF6D7ZJOEJYSMjwpcWmI7ulA_AQbh8Ped6YQw9oLIRXsnBCx5tbXERQaXd_zrZi5POKp-Wz_ExQwKmYp_3X_sFJJ9jiOBnJFpDhBaxIjp2ba24eyDbj_QCzCIC_8/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>

• غير: maher90097473 باسم المستخدم الخاص بك على تويتر
• غير: maher.collo برابط الصفحة على فيس بوك
• غير: blogspot/itFRx بمعرف التغذية الخاص بمدونتك على فيدبورنر

ثم حفظ الأداة يمكنك وضعها في أي مكان ترغب بأن تظهر في مدونتك أو حتى من خلال القالب ثم محرر html