Social Network Widget With Spinning Hover Effect For Blogger

By : Follow Trends

On : 9/02/2015

In : Blogger Tips

0 comments

Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<style>p#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#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinning Social Icons Widget By bloggertrix.com */
</style> 
<center><p id="socialicons">
    <a href="http://www.facebook.com/tiwcher /">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPBoYKXS8AxVcs1civ8BWIk01fWO2bWROwSf7DXb3qpAD1zq31Mmp9FNxEYuTYeuXt6gHGi3MkbYHnha4uMV25Y1ULiDtWls3Ec-dqNeGZpzyUeLt164dhmlBifmSRsw_zCxxWG-9XhUIH/s1600/facebook.png" /></a>
    <a href="http://www.twitter.com/tiwcher /">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrjQSvSdD1S4nvsNHuZbuaho5PS7Tf5HU2JejfSUzYhkaE9pHEFMsSEs-r0xbD_dVoL7u0OS0UsO4eNn3fdDg3e8S-iHxjgDKXI5Tfznccl15FDNEHi5Anm4bl2d5_IPbGGnr7456Zpjs/s1600/twitter.png" /></a>
    <a href="https://plus.google.com/107955298793879607963">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6nhS3B6WBlgMExinl9gKPKSjTuCjJ-mtjyIs5QBetHZT-U1Hl24lUUGFXlWSRI2LqfvBuKMl5pw0PCDOHG_so51Zm2BgnJ-By3n2cPY9rgfrgLxHoQDEAf_GRxIK3PDk1taoldN6fCM99/s1600/googleplus.png" /></a>
    <a href="http://www.feeds.feedburner.com/tiwcher /">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkzsb7ZafcBPxIp2hW3rkNAjG6jRp7Q6KEIHcU0gsGDeBnGVbvh_1IiT6ymxrnx-L4humuBqibVMx7aZejtmOIdizJP0MkXseqZI1EMz71ZClXPEL3_9iGkoNAKISwREGlxZfOlOTtuKr/s1600/rss.png" /></a>
    <a href="http://www.youtube.com/bloggertrix/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAz9oMC18jFV7Ju0LEf_C0zdKTqRfON2l17WqNNGh7Rde90h2KZn2ajCzm4DRBQIu6HsxsIV0WN6Zg-MKzzzSyM_USws84NTAG92waxdY0vFsT3Lg4Typm8MprVrW_XDHD8cH30ms9P_mp/s1600/youtube.png" /></a>
</p></center>

After paste above code
* Replace tiwcher with your facebook username
*Replace tiwcher with your  twitter Username
*Replace 107955298793879607963 with Google plus id
*Replace tiwcher with feedburner username
*Replace tiwcher with your your-tube username.
4. Now save your HTML/Javascript'.
    You are done...