Blogger Social Sharing Widget With Rotation Hover Style

515 loyal readers

RSS feed | E-mail

1058 followers

Follow us on Twitter!

260 followers

Join us on Facebook!

Today i am gibing you a great social subscription widget which you can use it in your blog to increase your facebook,twitter likes and also rss feed. this is a great widget with hover effect 

Demo

Log in to blogger  Design > Page Element.

Click Add Gadget and select 'HTML/Javascript

Now Paste Below code.

<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} 
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 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#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} 
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} 
p#socialicons2 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="socialicons">    
<a href="http://www.facebook.com/bloggertrix" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDG2dwwj49QNtYr9eXLqX6knmRZosQzszwp9pfcOjW-e8QGPDArWaVRvfkY6kdfgg8RFo0Zg0w6jj5kp7P0uCGipMVXkJidMYqTZcbtwhM2xVPjM2ZC9s-5XPqz6Nrlahx_W1FjnZadz8/s1600/bloggertrix.com-facebook-icon.png" /></a>    
<a href="http://www.twitter.com/bloggertrix/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-1cV01L1a9qXQ-6T0hI5nsXCHSg5CmsI6qx6yD9XsGRzVyF4QuPPkgAmXPtGWdsh8L_Oo-qjBh3MTXDz-rReLZS1FL2EX0eaBf2OdaUanCgUoM_6tMeeeKTRa83urgVR5Yw8UHBCxzQ/s1600/bloggertrix.com-twitter-icon.png" /></a>    
<a href="https://plus.google.com/107955298793879607964" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wHP1fp6axU4cL6_jKWuJ0AdbSfJ1fN3Jp-HUKfuOJxfO-Tb48htuJ7yf26JIeTUREMBnOmo9T6aG1wAJ1Cz1oSFMOezdEemsReniqRqJ4ATE1IpMtmDv_lQIi5fwBAyky-l8E9mgBNg/s1600/bloggertrix.com-google-plus-icon.png" /></a>    
<a href="http://feeds.feedburner.com/bloggertrix/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQDyTaWYV0CSuMYCSWHLfMNSc6Z3mJdmQn3xiTBqAxleFfW22cSUnQD51KRnQQzQHQAOKnntgjzLrz2nnAGtqdjucBCBHgKlufC7TyqtD11AivKAoJyI6DI77ygKvOpbwWg_0JznvUnQs/s1600/bloggertrix.com-rss-icon.png" /></a></p></center>

After paste above code
* Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace 107955298793879607964 with Google plus id
*Replace bloggertrix with feedburner username

Now save your HTML/Javascript'.