Complete Spinning Social Icons With CSS3 For Blogger

In my previous article i have given you “Half Spinning Social Icons With CSS3 For Blogger”. Now this an updated version of that blogger widget in a new style. On mouse hover they spins (rotates) 360⁰ and when mouse hovers out on it they return to their original position,this effect is caused by the CSS3 property which I have mentioned above. Now lets go to the tutorial and see how to add them into blogger blog.
 

How To Add 360⁰ Spinning Icons To Blogger ?

• Go to Blogger.com.
• Login into your Blogger Dashboard.
• Layout –> Click on Add a Gadget –> HTML/Javascript.
• Now copy the below copy and paste it the box.
• Then Click on Save.

<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="YOUR-FACEBOOK FAN PAGE-URL GOES HERE">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGyaNA21b4Sa60lS1ogeWUwdaMAoZk8jkNsNrQOoU4OytDzUunoS868cFRV03OlD-wqZCyjzjDWMRx-20zoV-QpaRrn5Jhgu76T-mOLL5x9Q48wJchqOuMz_o6eLKILcU3wjz9fASmzU/s1600/helperblogger.com-facebook.png" /></a>
<a href="YOUR-TWITTER FAN PAGE-URL/USER NAME GOES HERE">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCTX2PhQrIyD2YyQkl21O5hiwdwTSKRu1IpzQ6eMiyPcFhTFhJoH-4JbIc7SQmWtQ69fM4rdqkuhWEEWi6EeE5VMkIJsKk_7YjFv_s3OH_SM3iCjxiU4ALcSKCSwRZwm1KPhr_5T-KD0/s1600/helperblogger.com-twitter.png" /></a>
<a href="YOUR GOOGLE PLUS PAGE URL GOES HERE">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWdANSHD5VQmun0YRy03uoV6VUd9L9G2MQVSEaQVPBuGwgkMTd7qfcPrJlX-Od5rtfy_y83TJwZYrOEzZG_GP7SHjICY4rIs2T6byeO9hwUA2Q3A62iolGU8A4N4cfJuJ15eRso0xIYE/s1600/helperblogger.com-google_plus.png" /></a>
<a href="YOUR-FEED URL- GOES HERE">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxl3lqk9hu5f542K1ADdy-AUatB2HaKjRx-2fGjI9kWTe1pCT4a9FPOMT-BZ4O23f7VqAFNZga0uCLxmGQ5ISTw65WwgVp65ByfTPr4zcjrJw-NVcwIvzpD7qvojT_OwnrAf9sKJzscqY/s1600/helperblogger.com-rss.png" /></a>
<a href="YOUR YOUTUBE USERNAME GOES HERE">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDws3qmIoOMu0CVJiimTXk-e2Lflo0oGNUHCQEd_Nd7F7Q_0GjY6yupI9sTed63b3V969tGIvaQFRoEHayKd1XwbY1Xn39LO-b3LgkUQCZSPBRsmVSE8w3wzvgxrkwo0v75ljIWCzWkg/s1600/helperblogger.com-youtube.png" /></a>

Note : Highlighted text in the above code should be replaced with the following.

• YOUR-FACEBOOK FAN PAGE-URL GOES HERE with your Facebook fan Page URL
• YOUR-TWITTER FAN PAGE-URL/USER NAME GOES HERE with Twitter user name or Fan page
• YOUR GOOGLE PLUS PAGE URL GOES HERE with Google Plus Profile or Fan Page URL
• YOUR-FEED URL- GOES HERE with your feed name URL
• YOUR YOUTUBE USERNAME GOES HERE with your YouTube Username.

If you like this then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you.