There are many cool ways to display your social media icons on your website. Many of the more impressive animations required either jQuery or CSS3, and a little coding. In this post i will tell you how to add a slide over social media icon widget with CSS3 to your blogger blog. See a Demo here

Related Widgets 

• Social Media Blogger Widget with Spinning Roll-Over Animation
• Social Media Blogger Widget With Zoom In Animation

Installation

• Open your Blogger Dashboard
• Goto Layout and click Add a gadget
• In the window that opened , select HTML/Javascript
• Now copy and paste the below code in the HTML/Javascript window 

<link href='https://googledrive.com/host/0ByP5-IaubR8naFk3ZlpTVFJVd0k' rel='stylesheet'/><center><a href="https://twitter.com/Clubtechnicate" target="_blank"><div class="twitter-hover social-slide" title="Follow Our Updates On Twitter"></div></a>

<a href="http://www.facebook.com/Technicate" target="_blank"><div class="facebook-hover social-slide" title="Like Our Facebook Page"></div></a>

<a href="http://feeds.feedburner.com/technicate" target="_blank"><div class="rss-hover social-slide" title="Grab Our Rss Feed"> </div></a>

<a href="http://feedburner.google.com/fb/a/mailverify?uri=technicate" target="_blank"><div class="email-hover social-slide" title="Get Free Updates Via Email"></div></a>

<a href="http://www.youtube.com/Clubtechnicate" target="_blank"><div class="youtube-hover social-slide" title="Watch our Youtube Channel"></div></a></center>

•  Replace the red highlighted usernames with your respective social media usernames and save the widget