How to Add CSS Animated Social Media Icons to Blogger

Social Media is always helpful to blogger, even one like or share can drive traffic to your blog, you should serve your visitors social sharing and follow us button by which they can stay connected with your blog. If your social sharing option is attractive then user love to share your blog. In this post I will provide you attractive social media follow us button with css3 tooltip effect.

LIVE DEMO

Adding This Widget To Blogger

Step 1: Go to Blogger Dashboard → Add a Gadget → Choose HTML/JavaScript
Step 2: Paste the following CSS Code.

<div><a href="https://twitter.com/UrbanCityStyle" title="Follow us on Twitter" class="social-link social-twitter"></a><div><div><a href="https://www.facebook.com/blogosphere" title="Like us on Facebook" class="social-link social-facebook"></a></div><div><a href="http://feeds.feedburner.com/ekWMe" 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*/ .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(http://3.bp.blogspot.com/ -imX7YgRyr08/U-yARyGN5FI/AAAAAAAANbA/4hoPiwpFO28/s1600/twitter-sprite.png) } .social-rss { background-image: url(http://1.bp.blogspot.com/ -Z9xBt0KFJW4/U-yAR5YZ7tI/AAAAAAAANbM/wGmM77Q6sYk/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(http://3.bp.blogspot.com/ -d9tt3kxKbmg/U-yASA8GuWI/AAAAAAAANbE/2UwDsjlARbs/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>

Step 3: Now according to you need paste the following code where you want to place this widget. For Example Layout → Add a Gadget → Edit HTML/JavaScript.

Step 4: After Pasting Above Code Click On Save Button

After Adding This Code Replace url with yours Url or with Social Media Page Or Profile Link.

Finally After Customizing, It Click on Save Button - Enjoy!!