Look at Stylish Social Connect Buttons at Right

Tutorial used:

1. How to Add Floating Social Media Buttons to Blogger

CSS used:

.flt-wdt {
position: fixed;
right: 5px;
top: 40%;
}
.flt-wdt img {
float: right;
clear: right;
margin: 5px;
-moz-transform: scale(.8) ;
-webkit-transform: scale(.8) ;
-o-transform: scale(.8) ;
-ms-transform: scale(.8) ;
transform: scale(.8) ;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover {
-moz-transform: scale(1.1) rotate(6deg);
-webkit-transform: scale(1.1) rotate(6deg);
-o-transform: scale(1.1) rotate(6deg);
-ms-transform: scale(1.1) rotate(6deg);
transform: scale(1.1) rotate(6deg);
}

HTML Part:

<div class='flt-wdt'>
  <!-- Twitter -->
  <a href='http://twitter.com/blogger_raju' target='blank'><img alt='Twitter' height='48' src='https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png' width='48'/></a>
  <!-- Facebook --> 
  <a href='http://www.facebook.com/Blogger.Tutorials' target='blank'><img alt='Facebook' height='48' src='https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png' width='48'/></a>
  <!-- RSS --> 
  <a href='http://feeds.feedburner.com/om-simplebloggertutorials' target='blank'><img alt='Feed' height='48' src='https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png' width='48'/></a>
</div>

Explanation:

Original image size is 48 pixels. I scaled it to .8 and on hover, scaled it to 1.1 so that it doesn't lose it's pixels while hovering.