Spinning 3D Social Media Icons

Spinning 3D Social Media Icons

1. Go to blogger dashboard --> layout --> Add a gadget ( Html / JavaScriptgadget ).

Spinning 3D Social Icons 64*64

<style>p#hb_socialicons 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;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/bloggertricksdotbiz">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNuA4_3IgG3pocqTM2lOBPgCGKASyr8_D_JKWrrXhuhRBxIWjMsrad5KKzQCZ87L8IsMXeMkTGPS0OYOhHeJqJHZWSvJwhcBjtJpJJjogKRpZCrK0ukLU1ZG_ogqUvGAWWgb-jHqBvd0c/s1600/
bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/110100302012846213219">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUgwIJvBcOwq86SYOIhKxOXGK1Vni1F0dwjiH68ZNxU7nHVzyGEqyK_q6mpTlX4QaFDraBNNEMivJaStl4yXGhUvqJZ9VXfdXTCDCtVckQC_SvPyr4Dhwh2mGxd9n_ZRhUd3OXPze448I/s1600/
bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9idxKMEQSGbgQ5MF5A0NafE5DD9WTYe-g3OER4xbIV3nUsmrNegogUwy0UtSzqu7kFHmB5YEYgycUwx4pdh9rvCUW4BQFFGRh0ez-DiQF2aoeqL0ywIr_MyFZMUBCyR9J-lIK0p36Bs/s1600/
bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/jackievijay143">
<img border="0" src=" http://3.bp.blogspot.com/-Npr8b-w9EDw/UCM9Itv5_cI/AAAAAAAABhk/8ejVQgh4k7w/s1600/
bloggertricksdotbizPT.png " /></a>
<a href="http://www.feeds.feedburner.com/bloggertricks/btvj">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8LC2NenFpT-wTh5u5K5Qd_6TbW1GHb300f5BbYcDTb4XvAHxIqatwuNLChTxWip2Rh9RAsXWwpdEebV3dV6Ke3OVaDw4iTXAWBW599hEDGrBngpVcNH2XWilgou_MNI0NjtYC_UfqlWI/s1600/
bloggertricksdotbizRSS.png" /></a>
</p></center>

The above script is for 64*64 dimension icons.

Spinning 3D Social Icons 48*48

<style>p#hb_socialicons 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;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
<center><p id="hb_socialicons">
<a href="http://www.facebook.com/bloggertricksdotbiz">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66EQcckF8xgtE66bYJNHwjhyphenhyphen1vK3lEmMum4hb0teS0HoorvVb5zGLI5-FbvLXMt15ZSuRR0pK1c4Hb3tLsCjKKlJsGhH-QlVki7JgXXbuhCWmzX6W0QoyVkcYIj9blOp76bWQYcF6ef4/s1600/bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/110100302012846213219">
<img border="0" src=" http://2.bp.blogspot.com/-88F1IMlPog0/UCM_cDdjh5I/
AAAAAAAABiE/vexbC6LvSe8/s1600/bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcL8LGooFT09bXfQ8eFN3bQx-wTxmN-VLPBay0Lrt4qwtgprEyXCdQHxhqKhEG_ehbkE0kx2CNYiwhGPcqABWjbzGfyj3zXyyBQOhdKjeFz0mKemCugpYf6R-pWyUf_gE9ldWjLFrrxE/s1600/
bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/jackievijay143">
<img border="0" src=" http://1.bp.blogspot.com/-9xEgooMeW3I/UCM_hw_I8uI/
AAAAAAAABiM/Hc7FJplcwjY/s1600/bloggertricksdotbizPT.png " /></a>
<a href="http://www.feeds.feedburner.com/bloggertricks/btvj">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04Eknsns4kOv5WF6-5aAiGx2j4lTU1_z064WJUBgpRhvseJiMYc8ro-O0HoWeH7LVbQ-0yalQSvC-0VozqNoZnDjzfTj_btKhy63LPOLAbxK1fZHBnVHfAs3COeS73Eo0oq9_pco5xr4/s1600/
bloggertricksdotbizRSS.png" /></a>
    </p></center>

The above script is for 48*48 dimension icons.

Note:-
Replace the social links with your respective social links.

2. Copy the widget script given above depending on your own desired dimension.

3. Paste the copied script inside your Html/JavaScript gadget and Save the Gadget.

4. Save the Layout.


Fix:-
The paragraph style of your sidebar may override this widget and make the icons to appear in 2 lines, in such case kindly feel free to ask me and I will help you fix it to make it appear in a single row.



That's all pals. . Now view your blog to feel the power of spinning 3D icons. :)