How To Add Animated Social Icons to your blog

Adding the CSS Sprite Animated social media icons to your blog or site is very simple. You just need that Copy the given code and paste in blogger layout in HTML/JAVA script and save the code so icons are applied to your blog


Follow The Steps:

• Copy the given code 
• change :"https://twitter.com/your-twitter-link" with your twitter address
• Change "htttps://www.facebook.com/your-facebook-link" with your facebook address
• Change "http://feeds.feedburner.com/your-feedburner-link" with your feed burner address

Code:

<div><a href="https://twitter.com/your-twitter-link" title="Follow us on Twitter" class="social-link social-twitter"></a><div>
<div><a href="https://www.facebook.com/your-facebook-link" title="Like us on Facebook" class="social-link social-facebook"></a></div>
<div><a href="http://feeds.feedburner.com/your-feedburner-link" title="Subscribe to our RSS Feeds" class="social-link social-rss"></a></div></div></div>
<style type="text/css">
/*CSS Sprite Animated Social Media Icons by howto-dotricks.blogspot.com*/
.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: left;
    -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/AVvXsEje_SAi7mBgB6UL3mmI0vK9Yw5jSEzTxZrqkt2s1MLjxbR5ULMqiKF4l6CtiTj-H6fUf611mNQQae_BkBTrPaVyW0O8-V_MYv9fKSyNW3iINw6EZP-v-zu2vMitFDMTxMkBhN7_55CzCd0/s1600/twitter-sprite.png)
}
.social-rss {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi1XIapehwISnEFmwx_kOLYbW-0wu0X6CqRD2IMQV6fUJFfJaVg0jRjbnYsVXLCyAEEKXgjVflHH12y55DSzon29iEE2aX6PWzIwBZvaVrVfXALD9lZeNKwSUaNY1ApqtL5mHL4EID-6U/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/AVvXsEhMoVWzuym7dsOFn2YmccoAGBOFSMtghMKskeovSaJeOtqLCHxx7h-pUtLl7TJli282MYtUVQYnGWbYIHLX_E0SM84-_EKSr3WITIRcIz05PGAF3toWA_ULYdFUwg48KmB5FS5nPhgb1Us/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>

•  Now goto your blogger Dashboard >> Layout 
• now where you want to display your animated icons click "Add a Gadget" and choose "HTML/java script" widget and paste the above code and save the gadget

now view you blog and the Animated Social icons are Displaying where you installed them.