Adding CSS Sprite Animated Social Media Icons to Blogger / Blogspot

Animation on hover over on the icon is a great way to impress your blog readers and maybe there's a great chance to get more clicks on it. in my older posts, I've already shared many other social media buttons and widgets for blogger earlier. but in this tutorial you may surprised to see a fresh new Pure CSS based sprite animated social media icons which gives an awesome look as you can see the demo of this widget at top right corner of this blog (Right side of header) to get ideas how actually it looks like. adding this widget to your blog is also easier therefor I've created a generator that you will need to enter required data to the generator and then one click to add CSS sprite animated social media icons to your blogspot blog.

CSS Sprite Animated Social Media Icons

Also see : A Perfect Social Subscription Widget for Blogger / Blogspot

How to Add CSS Sprite Animated Social Media Icons?

Adding CSS sprite animated social media icons to your blog is pretty simple like 123..
Fill the required data in generator below.
Copy widget code from the text-area box below.

Facebook Page Username :
Twitter Username :
FeedBurnet ID :

<div><a href="https://twitter.com/nitinmaheta" title="Follow us on Twitter" class="social-link social-twitter"></a><div>
<div><a href="https://www.facebook.com/bloggerwidgetgenerators" title="Like us on Facebook" class="social-link social-facebook"></a></div>
<div><a href="http://feeds.feedburner.com/BloggerWidgetGenerators" 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 bloggerwidgetgenerators.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/AVvXsEhw-4gB8bY0IFXWjpfj2ZYodFVa7mx8_9Ll2d_Q1yo0Z_tNj5kui6irUfsvmEmqHb1kaPkDYSn3sCSo90-HN9BTY4unr_HAvnRC_ZEoSxn8kXx4YwYdzYsgW-q2aBGyESm4pLowcNgazW0/s1600/twitter-sprite.png)
}
.social-rss {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8CRgwCgRFAsPuu0K5hs5eYjCtr8Mo8Ba-3OPGaA9J23gEX6YdxRMoey0zYxTiUR-b8aIsl2Mc7R9Fzkx8fKBMgL7wVDytBsW2iW4MUhUnNmMD3iySlsRVSBBDLCkUrs6TGQ7EGfS31U/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/AVvXsEh7nHW6WnxmVCdvBGEtxGow7ntOPlgNwyjuczxS037TBi-98pPp6Cb9_qichhxiqCoFnw7TK9NZiZ-mKE3yuZ-JEztiuyq1OtrfSoqft1D6t8wQ-e0cMftBkXA1NUqTWhU2qWLu01vT3pU/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, Go to blogger dashboard > Layout > Add a gadget > Choose HTML/Javascript from the list.
Paste above code in it and save your widget.

That's it. You can drag and drop your widget anywhere you want to be displayed in your blog.

Drop your comments and questions below. :)

Add Comment

Quicker BD

How to Add CSS Sprite Animated Social Media Icons?