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

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

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

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

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

  

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

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

<div><a href="http://feeds.feedburner.com/feeds ضع هنا رابط " 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/AVvXsEiu11UEBXOp-u2ety0jPnwycnoW9S1d2_BXRxd96Co8Cl0Sl1clvJY5U3iGfQ2qXESSNhKBkkJGhPew_GGPNHPeXvWjJhLHUJPvdFP5t7mYRfwgoAubEYpWY1jpQDIf2EV0qSTXHfn7hNk/s1600/twitter-sprite.png)
}
.social-rss {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi08WB5BEe0xJgRLwMYXrM-klVs-uiEp5tZG2Q4ZoPu3EG1xFhbUw3huAQlR2UtmfMu0O4D7HI66RSoJUHBmyY7LCtaNjkIn7lNYSCpt3itubO1XSrF9Ur9tmcFjn7NO6Lk5DB5QBBGuRU/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/AVvXsEjjxfoY0TYGYaw5FCOL8D9b_hxJsPw8UNoMO4-rdfWm1g9Occ-usWNjEoDeHnFrFzME7F84yF8OXX-BCnPRuh0LJNVOHToVVXCbshhpPXw8roEW4FH3BvJNIIpJfsaygQs4yLPtDmgWYNE/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>

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