Labnol-Style Social Media Icons

Posted by Yuga irgi on Friday, May 09, 2014 in Social Media, Widget | No comments

SOCIAL ICON

Another art of creativity from Amit Agarwal's box of widgets! You must have seen those beautiful social media icons that do a smooth sliding animation when hovered on. Today I will show how you can have the same for yourself! These icons are made from pure CSS and hence, they won't reduce your page speed. Get 'em now!

Live Demo:

RSS Twitter Facebook YouTube YouTube

Steps to implement:

1. Go to your blogger dashboard >> Layout >> Add a Gadget.

2. Scroll down and choode HTML/JavaScript >> Paste the following code in Content.

<style>
.SlidingSocial span{float:left;display:inline;margin-right:8px}.SlidingSocial span a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}.SlidingSocial span a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwlraVUZrs8AlRXcbIvbzF1cm2UxX0FV46HeN_nYL-TKk2uqNNf5uyQGLDgyDhX7Nf-y3xUYbzOVbV0xACadAzsReiQw1zf9gy8DQIzsc5tVxgydoiiiL-Bov95Ns4z1DpJRrwihgiUnE/s164/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;xopacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}#iconTwitter{background-position:-33px -33px}#iconTwitter:hover{background-position:-33px 0}#iconFacebook{background-position:-66px -33px}#iconFacebook:hover{background-position:-66px 0}#iconRSS{background-position:0 -33px}#iconRSS:hover{background-position:0 0}#iconYouTube{background-position:-99px -33px}#iconYouTube:hover{background-position:-99px 0}#iconGooglePlus{background-position:-132px -33px}#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class="SlidingSocial">
<span><a title="RSS Feed" href="http://feeds.feedburner.com/#" target="_blank" id="iconRSS">RSS</a></span>
<span><a title="Twitter" href="http://twitter.com/#" target="_blank" id="iconTwitter">Twitter</a></span>
<span><a title="Facebook Page" href="http://www.facebook.com/#" target="_blank" id="iconFacebook">Facebook</a></span>
<span><a title="YouTube Channel" href="http://www.youtube.com/user/#" target="_blank" id="iconYouTube">YouTube</a></span>
<span><a title="Google Plus" href="https://plus.google.com/#" target="_blank" id="iconGooglePlus">YouTube</a></span>
</div>

Code Credits: DI

 3. Replace the links highlighted in blue with your respective links. If you don't want any particular icon, simply remove it's entire <span> tag.

Example: Suppose you don't have a YouTube channel and hence, don't want the YouTube icon to be displayed - simply remove the given code (You can do the same for any button):

<span><a title="YouTube Channel" href="http://www.youtube.com/user/#" target="_blank" id="iconYouTube">YouTube</a></span>

You're done!