Half Spinning Social Icons With CSS3 For Blogger

We always try to make something different which will attract our readers/visitors quickly. This widget will surely help you to increase number of social subscribers also it will attract your readers and grabs visitors attention quickly.On mouse hover they spins(rotates) some degrees 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 Half 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.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
</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.