New Tilting Hover Effect Social Sharing Icons

Well Here is another Social Sharing Widget for Blogger Blogs.This is So Simple widget and very Easy to Add.You Can Put Up this Widget to Your Sidebar or Below Posts and Anywhere You'd like to.When You Hover On the Icons they Will Tilt to Bottom.

This is a Simple Css Based Widget And It Doesn't Take Much Time To Load. So Add this Widget to you Blog..By following the Below Steps.

This is How the Widget Look Like:.

How to Add this Widget to Blogger:.

Login to Blogger < Design < Page Elements 

Now Add A Widget and Choose HTML-Javascript.

Paste the Below Code in it.

<style>
#main_cbt_icons {
width:222px;
height:37px;
}

#facebook {
width:37px;
height:37px;
float:left;
margin:0px;
padding:1px 1px 1px 1px;
}

#twitter {
width:37px;
height:37px;
float:left;
margin:0px;
padding:1px 1px 1px 1px;
}

#google_plus {
width:37px;
height:37px;
float:left;
margin:0px;
padding:1px 1px 1px 1px;
}

#rss {
width:37px;
height:37px;
float:left;
margin:0px;
padding:1px 1px 1px 1px;
}

#youtube {
width:37px;
height:37px;
float:left;
margin:0px;
padding:1px 1px 1px 1px;
}

img:hover {
-webkit-transform: scale(1.1) skewX(2deg) skewY(2deg);
-webkit-transform-origin: 0% 0%;
-moz-transform: scale(1.1) skewX(2deg) skewY(2deg);
-moz-transform-origin: 0% 0%;
-o-transform: scale(1.1) skewX(2deg) skewY(2deg);
-o-transform-origin: 0% 0%;
-ms-transform: scale(1.1) skewX(2deg) skewY(2deg);
-ms-transform-origin: 0% 0%;
transform: scale(1.1) skewX(2deg) skewY(2deg);
transform-origin: 0% 0%;
}
</style>

<div id="main_cbt_icons">

<div id="facebook">
<a href="http://www.facebook.com/technouniversity" target="_blank" title="Follow us on facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcsmGzBGD0H65FEl2e329mC0vZfnfbhIY3cUMgwEZyDdlVFkteDdi40irWlf8Znt46Haxq7lHB24JNHJgi72HT4SSwf5idC8_7SxboTLWOXvqfD5qanzhy_LKWy2IlCzMM67htUjpQbY/s1600/social-facebook-box-white-icon.png" /></a>
</div>

<div id="twitter">
<a href="http://www.twitter.com/saikiransama" target="_blank" title="Follow us on twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivPsEKjkP3c44fxc54e73RsX6MWswh6k-cZFBhR3pzAO4mIp8if4NBBvy6KnnwVueBq6GvaS_ZVucEXHmglSC0JHC4LLF-uVqDLK-xNY-0Nro91-HM1wQnqJ-zlzuMCCgv9lIp0jAKnMY/s1600/social-twitter-box-white-icon.png" /></a>
</div>

<div id="google_plus">
<a href="https://plus.google.com/118431859602822967195" target="_blank" title="Follow us on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv6ySQeXK_1g-XaZa_TumTmcE5LdWrQH5CxS3bqKwNdErxI8EwZs3DqBkU-MDFuizblDvtZohFc9QPfsXYpN7FqbjEIjLFQmSCGaBBrI6Pv8pz5Tb8wjIyYs3prmtekq968Ln6F7Ddn7o/s1600/social-google-box-white-icon.png" /></a>
</div>

<div id="rss">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Goodinblogging&amp;loc=en_US" target="_blank" title="Burn our feeds"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiskaydtYBbmJE2VGlfEsA9GZPmVXqhOnCW-dd1XxhEVvVY5Acj-ZS785bQuIOzK03VGTu6misdVE1_NqVLu2LhBC5Wx8hq-x-kqewGp-JnxNIha5Iryf7_qL0mwGKd2sULw8JQw2CvBQw/s1600/social-rss-box-white-icon.png" /></a>
</div>

<div id="youtube">
<a href="http://www.youtube.com/goodinblogging" target="_blank" title="watch our videos"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIA9ANkR-aRpPQZxJ5Z29ZFyOIQe4T9xjQYjr4Z2Shzi9UfZ4ya4wHR-lmnA3X6Dr8VsfHsk4xOhCGJ-lvz856jGgaz1_C0EVHBkn9KIGh1OGIDOscOEC61-D9m6QKd44RD3wZEGf1eq0/s1600/YouTube-icon+%25281%2529.png" /></a>
</div>
</div>

Replace the Highlighted Usernames With Yours..And Save the Widget.that's it Now,you're Done.