Περιστρεφόμενο Social Share Widget

Ένα πολύ όμορφο Social Share Widget που όταν μεταβείτε επάνω του περιστρέφεται έως ότου εμφανιστούν όλα τα εικονίδιά του.


Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα μπλε γράμματα με αυτά της επιλογής σας και πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

Απόκρυψη κώδικα

<style type="text/css">
.moc {
  height:60px;
  width: 60px;
  margin:100px auto;
  background: #444;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  position:relative;
}
.moc:before {
  content:'';
  position:absolute;
  height:60px;
  width: 60px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLJSFdGpu6Qhrad4uW4-naKngOUXW9UqrwWo9dqzH8HJc3OfKXeKqBcfW14_5MRf4TaUmHT58wPUgmUnGWMmDHijmeaM4qgofojd4e0GKRER6-fOfjs060QDEtJ6-9QyppaBkEEfvBf0w/s1600/share.png) #444;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  z-index:100;
}
.moj {
  height:60px;
  width: 60px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  position:relative;
}
.moj div {
  height:10px;
  width:100%;
  position:absolute;
  margin: 25px 0;
}
.moj div:nth-child(1) {
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
.moj div:nth-child(2) {
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.moj div:nth-child(3) {
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}
.moj div:nth-child(4) {
  -moz-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  transform:rotate(135deg);
}
.moj div a {
  height: 10px;
  width:10px;
  background:#fff;
  display: inline-block;
  position:absolute;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
  background-position: 50% 50%;
  background-size: 80%;
}
.moj div a:nth-child(1) {
  right:0px;
}
.moj div a:nth-child(2) {
  left:0px;
}
.moj a[href*='feedburner.com'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRC5ws3-Orm5oGtBEh585cPRXqkvngpu6XNPvJF-RGGK5sdN63NxnT1KsOtrzDNiIlVg63D8spZK5VAaBNN5vZz5D-t62tQaNQqmXa1SMGgr6EsuhIoOyrkXZIPef8IZvAq70L1EXN49N/s1600/feed.png);
}
.moj a[href*='feedburner.google.com'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkbRZ8Wbz6iCPm6EAipxC5FY2lKpFhe6p98Ce3CgFDWtN629oVhYYQ1EupAuJeN7VMDlGlCU7caS8uEJw1OZS3guzdrH7lDYRAVgFBF_XfGI53slHvlWWRfpkCfLL0WA23yJhUDUkhutZC/s1600/mails.png);
}
.moj a[href*='facebook.com'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNYf3RUtaeFMIk7n0UHoRhc0axmJm1Dj8EO5NpAoz2Qk_ocX069lh4j1MWE3C3FthR43rXzzWIzg9kpAs2skB9RN5a2BKmNyVeRCwrJstW0LeB1kW8Fz8xpj64cBAEK_0ereON4XaZ3ZD/s1600/face3.png);
}
.moj a[href*='plus.google.com'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQSj9dHcwinArYtYnwLrxm7R_7_iDTw9WYg8fBQaXixlVsYvxvNt1ZLqalN3QYiUfE5z-UVYG5ITdFNckr0JSRceR3GRUEEIh0S7AFXByZIKw33TqE8HbEbi1mwEaVtBxE9u1nCjNYVky/s1600/gmas3.png);
}
.moj a[href*='tumblr.com'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHecVnDR_g2cGNpwKBhTQZv5XA4fF6_yB3eVSSW2TpIMvVZ-lNygSZZ2Rl7KrLnPytq_PTR1bGFE3-tuQJn-Zx3czjslQjjsJK4-CF3wMf3sVPpgPx9OwIs2lCR372_wlL-YAgk0CwPtK4/s1600/3tumblr.png);
}
.moj a[href*='lastfm.es'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0n3RCcLrqQof96eneuOKkPJPiqHrUtaUhphv5r9zK4aYq1tOCqpepEPUUy4YziGstKLdA5jdj3xP2VeLwCpkEP6kZOYQvBKOKATieJ45ZdD6e_HxWtVNdn7HYhHh6NzaKgUwI-rPf96e/s1600/lastfm.png);
}
.moj a[href*='twitter.com'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgARPAPJ9ZOIfFu2Vui1TVjq88RiG97d8t97zKQLK5Ml6-uFgbkiDsKdO1eELbI-b9fpB7SduxmWqbix-CBB4bKtEJxXPIlO3dGiPSZvpnlghjRi41fuo8sNwAbJfp33btpfrymXfGVRjps/s1600/twiter.png);
}
.moj a[href*='linkedin.com'] {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRdsjHzKHfmMUIKQgg5q_SLt81nx1gI-eQdiyh4Q-ELiyOZcgxkDa-w5E4Dd_OqsFUM8dkqIwApth5DB8Ix43ZLFnfWKOr6plnBsEeGmcpC6RTqk_LTdEQV6ydlmipOAgL3wKrEKEkvH4/s1600/linked.png);
}
.moj div:nth-child(2) a {
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
.moj div:nth-child(3) a {
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
}
.moj div:nth-child(4) a {
  -moz-transform:rotate(-135deg);
  -webkit-transform:rotate(-135deg);
  transform:rotate(-135deg);
}

.moc:hover {
 -moz-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
 -webkit-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
 box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
}
.moc:hover .moj div {
  margin:60px 0;
  height:30px;
  width:100%;
}
.moc:hover .moj div a {
  height: 30px;
  width:30px;
}
.moc:hover .moj  {
  -moz-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg);
  height:150px;
  width:150px;
  left:-45px;
  top:-45px;
}
.moj div a:hover {
  -moz-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
  -webkit-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
  box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
}

.moj a[href*='feedburner.com']:hover {
  background-color:#ff6000;
}
.moj a[href*='feedburner.google.com']:hover {
  background-color:#C90000;
}
.moj a[href*='facebook.com']:hover {
  background-color:#5777FF;
}
.moj a[href*='plus.google.com']:hover {
  background-color:#C90000;
}
.moj a[href*='tumblr.com']:hover {
  background-color:#2c4762;
}
.moj a[href*='lastfm.es']:hover {
  background-color:#f00;
}
.moj a[href*='twitter.com']:hover {
  background-color:#00c0ff;
}
.moj a[href*='linkedin.com']:hover {
  background-color:#0055c9;
}
</style>

<div class='moc'>
<div class='moj'>
  <div>
    <a href='http://feeds.feedburner.com/feed'></a>
    <a href='http://www.tumblr.com/'></a>
  </div>
  <div>
    <a href='http://feedburner.google.com/feed_mail'></a>
    <a href='http://www.lastfm.es/user'></a>
  </div>
  <div>
    <a href='http://www.facebook.com/fanpage'></a>
    <a href='https://twitter.com'></a>
  </div>
  <div>
    <a href='https://plus.google.com/fanpage'></a>
    <a href='http://www.linkedin.com'></a>
  </div>
</div>
</div>