Rounded Social Buttons with 2D Scale Hover Effect

Views

This is my second creation of Social buttons with 2D Effect, you may want to see the first one “HD SOCIAL BUTTONS WITH 2D ROTATE EFFECT”. This is just a simple Rounded buttons that I downloaded few weeks ago, but I want  to give it  a little twist by adding a 2D Scale that can also be a Zooming effect in our social buttons. Most preferably, place this widget in your sidebar. When someone Hover on  your social buttons it will zoom up very smoothly just like what your seeing to our example above. The social buttons are: RSS, FACEBOOK, TWITTER, GOOGLE+, STUMBLEUPON.  I hope you’ll find this useful and worth using widget on your blog.

LIVE DEMO

INSTALLATION OF ZOOMING SOCIAL BUTTON ON YOUR BLOG

• Go to your Blogger Dashboard
• Layout
• Add a Gadget
• Choose HTML/JAVASCRIPT
• And insert this code,

<style type="text/css">
#social_zoom
{
width:320px;
}
#social_zoom img
{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social_zoom img:hover
{
opacity:0.7;
transform: scale(2,2);
-ms-transform: scale(2,2); /* IE 9 */
-webkit-transform: scale(2,2); /* Safari and Chrome */
-o-transform: scale(2,2); /* Opera */
-moz-transform: scale(2,2); /* Firefox */
}
</style>
<div id='social_zoom'>
<!--RSS-->
<a href='http://feeds.feedburner.com/FEED ID HERE' title='RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKjT9E2C66SwjKVmKft8dyqVUwOE4gNWJuQZZre1ZRIV88fktvctqt46X__Hb-s8LZbc0ob_CSdLOUH5OGqcy04uQXD8jciUwbgQxS-h0GSTDAZ_soeJyZcWCc8_wIHtGb7lDt_Fq5aQ/s1600/rss.png'width='60px' height='60px'/></a>
<!--Facebook-->
<a href='#' title='Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL3Eq7Cc9pOl3O5Zn14sIxlEu6Z8CQNDTVn5N1mMKYyAo7917TeC4Mx6RNh6txnIRP2oXKG4bof1Vi7rjVYAcL7mr_E64dr8Wkuft4ZRE2Rg714AMANXvZz92CDTpIgueJreUVOONYIjA/s1600/fb.png' width='60px' height='60px'/></a>
<!--Twitter-->
<a href='#' title='Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3uyp-pdtHN7x_4PoG4nGrB6qjiaEexC9Hrg-EJ6jDIjg3o9Op8mmpl-STzr-mYxbHR6Pari2VutHUC406qJm1U-7-X6AZft6cQpSYmh3RomO7egezi6uoK_HdFkYsUqgJJ0yxvW1Fqc/s1600/twitter2.png'width='60px' height='60px'/></a>
<!--GooglePlus-->
<a href='#' title='Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBjXmyUNJhpXY6u1x3D23sP-kA1CpIIhigynl1x2eVhLlYH7CDDznukNcWwUS7UsGkd7_YGvU469plGWaoUsmxEZuMXwJEYRNmXshb3VYi3TJpNgafVkUrushFiODPtaES4jIpo6IQqU/s1600/googleplus.png' width='60px' height='60px'/></a>
<!--StumbleUpon-->
<a href='#' title='Stumble Upon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUg5BZiIhw-wwNZrKU3mYizArnV-axkT5Z3J0JDqE8Lh1TJi5EiCc1dHOkWIghpU3euYY3QkSbEFdO6diNcygQBNbd3gApf5_QIG3TVTZYmaKWPV7UJgAH2Ni48ee_rjlYJmNRpNhNQA/s1600/stumbleupon2.png' width='60px' height='60px'/></a>
</div>

CUSTOMIZING YOUR SOCIAL BUTTONS

• Replace # with your social links
• Replace FEED ID HERE with your feedburner ID
• Adjust the default width:320px to your sidebar size

NOTE: ALWAYS CLICK PREVIEW TO CHECK FOR ANY ERROR

YOU CAN SAVE YOUR TEMPLATE NOW

And see it working perfectly.

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.